追加和删除行 jquery对表格的操作是故伎重演的难点。前段时间项目中用到了,明天在此地享受一下!
意义大要如下:

$(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);
 }) 
})

$(function(){
    //存入点击列的每二个TD的开始和结果;
    var aTdCont = [];

一、引进文件

图片 1

根本思路:

   //点击列的索引值
    var thi = 0
   
    //重新对TRAV4举行排序
    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);
    })   
})
 
 
重在思路:
  因为JS有SORT的章程,对数组实行排序,那么通过个主意,大家就能够想到数组了。
  1.点标表格标头的时候,抽出点击的是那一列。即列的索引值。因为上边要进行排序的便是该列。所以本身要掌握是点的那一列。
  2.对表格的数额部分,也正是tbody部分,进行点击的列的取值,把这一个值存入到贰个数组在那之中。
  3.将存入数据的数组,通过SORT方法举行排序。(这里写了三种,升,或降,因为是点击时要切换排序的点子。第4回落,第三遍升,第三降,第四升,依次张开)
  4.将排序好的数组的值进行遍历,在遍历进程中,和每一行TPRADO的点击列的不行TD当中的多少进行一个相比较。假诺相等,就插入到tbody的最后去.(起首插入的,将是在第一行。)

复制代码 代码如下:

享受一下代码吧!
html

  因为JS有SORT的不二诀要,对数组进行排序,那么通过个主意,大家就能够想到数组了。

DEMO下载:
 

<script type=”text/javascript”
src=”js/jquery.js”></script>
<script type=”text/javascript”
src=”js/jquery.tablesorter.js”></script>
<!– 引进以下样式则表头出现排序Logo,同不经常间引进图片 –>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” >

<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>

  1.点标表格标头的时候,抽取点击的是那一列。即列的索引值。因为下边要开始展览排序的便是该列。所以自身要掌握是点的那一列。

 

效果与利益如图:
图片 2 
二、标准的HTML表格,必须总结thead和tbody标签

js操作如下:

  2.对表格的数量部分,也正是tbody部分,进行点击的列的取值,把这么些值存入到多个数组个中。

 

复制代码 代码如下:

 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">中弘西岸3' +
          '<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">' +
          '维度三' +
          '<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);
}

  3.将存入数据的数组,通过SORT方法进行排序。(这里写了二种,升,或降,因为是点击时要切换排序的措施。第二次降,第叁次升,第三降,第四升,依次张开)

摘自 船长op

<table id=”myTable” class=”tablesorter”>
<thead>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhangsan</td>
<td>boy</td>
<td>beijing</td>
</tr>
<tr>
<td>lisi</td>
<td>girl</td>
<td>shanghai</td>
</tr>
<tr>
…略
</tr>
</tbody>
</table>

报表排序 其一就有一些复杂点了…
第一思路:
因为JS有SORT的章程,对数组举办排序,那么通过个方法,我们就能够想到数组了。
1.点标表格标头的时候,抽取点击的是那一列。即列的索引值。因为上边要拓展排序的正是该列。所以作者要清楚是点的那一列。
2.对表格的数额部分,也正是tbody部分,举行点击的列的取值,把这一个值存入到五个数组在那之中。
3.将存入数据的数组,通过SORT方法开始展览排序。(这里写了几种,升,或降,因为是点击时要切换排序的点子。第叁回落,第一遍升,第三降,第四升,依次举办)
4.将排序好的数组的值进行遍历,在遍历进度中,和每一行T路虎极光的点击列的分外TD在那之中的多少进行贰个比较。倘诺相等,就插入到tbody的末梢去.(开头插入的,将是在首先行。)

  4.将排序好的数组的值实行遍历,在遍历进度中,和每一行THaval的点击列的不得了TD当中的数据开始展览多个相比。若是相等,就插入到tbody的结尾去.(先河插入的,将是在首先行。)

//存入点击列的每二个TD的内容; var
aTdCont = []; //点击列的索引值 var thi = 0 //重新对T大切诺基举行排序 var
setTrIndex = function(tdIndex){ for(i=…

三、设置table可排序

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注