jQuery增加和删除表格项目及实现表格项目排序的方法

增加和删除行
jquery对表格的操作是老生常谈的问题。最近项目中用到了，今天在这里分享一下！
效果大体如下：

2016530164711889.gif （712×315）

分享一下代码吧！
html

<div class="table-responsive" id="Bk_table" style="display:none;"><table class="table table-hover table-bordered"><thead><tr><th><div class="out"> <b>板块</b> <em>维度</em> </div></th></tr></thead><tbody></tbody></table> </div>

js操作如下：

 deleteLie: function （） { //删除一列var index = $（this）.parent（）.index（）;for （var i = 0; i < $（".table tr"）.length; i++） {$（$（".table tr"）[i]）.children（）.eq（index）.remove（）;}if （$（".table tr"）.length == 1 && $（".table tr"）.eq（0）.children（）.length == 1） {$（"#Bk_table"）.hide（）;$（".blankShow"）.show（）;}},deleteOneline: function （） { //删除一行$（this）.parent（）.parent（）.remove（）;if （$（".table tr"）.length == 1 && $（".table tr"）.eq（0）.children（）.length == 1） {$（"#Bk_table"）.hide（）;$（".blankShow"）.show（）;}},addOneBk: function （） { //增加一列if （$（"#Bk_table"）.is（":hidden"）） {$（"#Bk_table"）.show（）;}if （$（".blankShow"）.is（":visible"）） {$（".blankShow"）.hide（）;}var firstLie = " <th class="hovershow"><span class="font_zs" style="display:none">中弘西岸3</span>" +"<input type="text" class="form-control getPrevalue" placeholder="填写板块名称" />" +"<a class="glyphicon glyphicon-remove bkdelete delete_lie"></a></th>";$（".table>thead>tr"）.eq（0）.append（firstLie）;var otherLie = "<td><input type="text" class="form-control" value="" placeholder="1-5之间数字" " +"onkeyup="if（isNaN（value）||parseFloat（value）>5||parseFloat（value）<1）execCommand（"undo"）"" +"onafterpaste="if（isNaN（value）||parseFloat（value）>5||parseFloat（value）<1）execCommand（"undo"）" /></td>";$（".table>tbody>tr"）.append（otherLie）;},addWd: function （） { //增加一行if （$（"#Bk_table"）.is（":hidden"）） {$（"#Bk_table"）.show（）;}if （$（".blankShow"）.is（":visible"）） {$（".blankShow"）.hide（）;}var Wdhtml_1 = "<tr>" +" <th scope="row" class="hovershow">" +"<span class="font_zs t1" style="display:none">维度三</span>" +"<input type="text" class="form-control getPrevalue" placeholder="填写维度名称" />" +"<a class="glyphicon glyphicon-remove bkdelete deleteoneline"></a>" +"</th>";var Wdhtml_2 = "";var LieLength = $（".table>thead>tr"）.children（）.length - 1;if （LieLength > 0） {for （var i = 0; i < LieLength; i++） {Wdhtml_2 = Wdhtml_2 + " <td><input type="text" class="form-control" value="" placeholder="1-5之间数字" onkeyup="if（isNaN（value）||parseFloat（value）>5||parseFloat（value）<1）execCommand（"undo"）" onafterpaste="if（isNaN（value）||parseFloat（value）>5||parseFloat（value）<1）execCommand（"undo"）" /></td>";}}var Wdhtml_3 = "</tr>";var allWd = Wdhtml_1 + Wdhtml_2 + Wdhtml_3;$（".table>tbody"）.append（allWd）;}

表格排序
这个就稍微复杂点了...
主要思路：
因为JS有SORT的方法，对数组进行排序，那么通过个方法，我们就会想到数组了。
1.点标表格标头的时候，取出点击的是那一列。即列的索引值。因为下面要进行排序的就是该列。所以我要知道是点的那一列。
2.对表格的数据部分，也就是tbody部分，进行点击的列的取值，把这些值存入到一个数组当中。
3.将存入数据的数组，通过SORT方法进行排序。（这里写了两种，升，或降，因为是点击时要切换排序的方式。第一次降，第二次升，第三降，第四升，依次进行）
4.将排序好的数组的值进行遍历，在遍历过程中，和每一行TR的点击列的那个TD当中的数据进行一个比较。如果相等，就插入到tbody的最后去.（最先插入的，将是在第一行。）

$（function（）{//存入点击列的每一个TD的内容；var aTdCont = [];//点击列的索引值var thi = 0//重新对TR进行排序var setTrIndex = function（tdIndex）{for（i=0;i<aTdCont.length;i++）{var trCont = aTdCont[i];$（"tbody tr"）.each（function（） {var thisText = $（this）.children（"td:eq（"+tdIndex+"）"）.text（）;if（thisText == trCont）{$（"tbody"）.append（$（this））;} }）;}}//比较函数的参数函数var compare_down = function（a,b）{return a-b;}var compare_up = function（a,b）{return b-a;}//比较函数var fSort = function（compare）{aTdCont.sort（compare）;}//取出TD的值，并存入数组,取出前二个TD值；var fSetTdCont = function（thIndex）{$（"tbody tr"）.each（function（） {var tdCont = $（this）.children（"td:eq（"+thIndex+"）"）.text（）;aTdCont.push（tdCont）;}）;}//点击时需要执行的函数var clickFun = function（thindex）{aTdCont = [];//获取点击当前列的索引值var nThCount = thindex;//调用sortTh函数 取出要比较的数据fSetTdCont（nThCount）;}//点击事件绑定函数$（"th"）.toggle（function（）{thi= $（this）.index（）;clickFun（thi）;//调用比较函数,降序fSort（compare_up）;//重新排序行setTrIndex（thi）;},function（）{clickFun（thi）;//调用比较函数 升序fSort（compare_down）;//重新排序行setTrIndex（thi）;}）}）

示例：

<style type="text/css">*{ margin:0px; padding:0px;}table{border-collapse:collapse;}table td{border:1px solid #036;text-align:center;}thead tr th{cursor:pointer;background:#066;color:#FFFFFF;}thead tr th:hover{background:#369;}</style><table class="tabSort" width="546" height="300" border="0" align="center" cellpadding="0" cellspacing="0"><thead><tr> <th scope="col">名称</th> <th scope="col">价格</th> <th scope="col">地址</th> <th scope="col">备注</th> <th scope="col">时间</th></tr> </thead><tbody><tr> <td>商品1</td> <td>10.5</td> <td> </td> <td> </td> <td> </td></tr><tr> <td>商品2</td> <td>11.3</td> <td> </td> <td> </td> <td> </td></tr><tr> <td>商品3</td> <td>9.8</td> <td> </td> <td> </td> <td> </td></tr><tr> <td>商品4</td> <td>12.6</td> <td> </td> <td> </td> <td> </td></tr><tr> <td>商品5</td> <td>13.9</td> <td> </td> <td> </td> <td> </td></tr><tr> <td>商品6</td> <td>18</td> <td> </td> <td> </td> <td> </td></tr><tr> <td>商品7</td> <td>21.3</td> <td> </td> <td> </td> <td> </td></tr><tr> <td>商品8</td> <td>6.5</td> <td> </td> <td> </td> <td> </td></tr><tr> <td>商品9</td> <td>7.4</td> <td> </td> <td> </td> <td> </td></tr> </tbody></table>

效果：