js 如何实现html table 动态插入行操作

1.选择CHECKBOX 可以任意前后插入行，求Js脚本
2.序号可以重新排序。

请高手指点
js 如何实现html table 动态插入行操作

3 个解决方案

#1

前后插入行用appendChild和insertBefore配合使用
序号重排貌似得每次改变后重新计算了

#2

获取父节点，点插入时你可以弹个对话框是要往前插还是要往后插
比如你选择了1.1的就是



$('.checkBoxClass').on('click',function(){

 var choose = prompt('往前插打1，往后插打2')

  if(choose == 1)

  {

    var checkboxid = $(this).data('id');

    $('#checkboxid ').parent().before('.....');

  }

  else if(choose==2)

  {

     var checkboxid = $(this).data('id');

     $('#checkboxid ').parent().after('.....');

  }

  


});


//



<tr><input type='checkbox' data-id='1' /></tr>

<tr><input type='checkbox' data-id='2' /></tr>

<tr><input type='checkbox' data-id='3' /></tr>

至于排序嘛你就
1.点标表格标头的时候，取出点击的是那一列。即列的索引值。因为下面要进行排序的就是该列。所以要知道是点的那一列。
2.对表格的数据部分，也就是tbody部分，进行点击的列的取值，把这些值存入到一个数组当中。
3.将存入数据的数组，通过SORT方法进行排序。
4.将排序好的数组的值进行遍历，在遍历过程中，和每一行TR的点击列的那个TD当中的数据进行一个比较。如果相等，就插入到tbody的最后去.（最先插入的，将是在第一行。）

#3

如果LZ可以使用jquery的话建议去看看他的帮助文档

这类基础问题最好是自己查出来再解决自己才能学到更多，有更多的积累，以便以后解决更多的问题

#1

前后插入行用appendChild和insertBefore配合使用
序号重排貌似得每次改变后重新计算了

#2

获取父节点，点插入时你可以弹个对话框是要往前插还是要往后插
比如你选择了1.1的就是



$('.checkBoxClass').on('click',function(){

 var choose = prompt('往前插打1，往后插打2')

  if(choose == 1)

  {

    var checkboxid = $(this).data('id');

    $('#checkboxid ').parent().before('.....');

  }

  else if(choose==2)

  {

     var checkboxid = $(this).data('id');

     $('#checkboxid ').parent().after('.....');

  }

  


});


//



<tr><input type='checkbox' data-id='1' /></tr>

<tr><input type='checkbox' data-id='2' /></tr>

<tr><input type='checkbox' data-id='3' /></tr>

#3

如果LZ可以使用jquery的话建议去看看他的帮助文档

这类基础问题最好是自己查出来再解决自己才能学到更多，有更多的积累，以便以后解决更多的问题

秒客网

js 如何实现html table 动态插入行操作

3 个解决方案

#1

#2

#3

#1

#2

#3

相关文章