Explication détaillée des étapes pour faire fonctionner la table avec jquery

Cette fois, je vais vous apporter une explication détaillée des étapes pour faire fonctionner une table avec jquery. Quelles sont les précautions pour faire fonctionner une table avec jquery. Voici des cas réels, jetons un coup d'œil.

Bien que p+CSS soit désormais populaire pour la mise en page, l'utilisation de tableaux présente encore de nombreux avantages dans de nombreux endroits. Il est plus pratique d'utiliser un tableau pour afficher des données. Voici un résumé des méthodes couramment utilisées. de la table d'exploitation jQuery tr td. Mémorisez-la par cœur. Ces compétences d'exploitation vous permettront de vous sentir à l'aise la prochaine fois que vous les utiliserez et d'améliorer l'efficacité du développement

Voici les fonctions couramment utilisées des opérations de table jQuery :

1. Mouvement de la souris Les lignes changent de couleur

$('#table1 tr').hover(function(){
    $(this).children('td').addClass('hover')
}, function(){
    $(this).children('td').removeClass('hover')
});

Méthode 2 :

$("#table1 tr:gt(0)").hover(function() { 
    $(this).children("td").addClass("hover"); 
}, function() { 
    $(this).children("td").removeClass("hover"); 
});

2. Les lignes paires et impaires ont des couleurs différentes

$('#table1 tbody tr:odd').css('
background-color
', '#bbf');
$('#table1 tbody tr:even').css('background-color','#ffc');
//操作class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass("even");

3. Masquer une ligne

$('#table1 tbody tr:eq(3)').hide();
$("#table1 tr td::nth-child(3)").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

4. Masquer une colonne

$('#table1 tr td::nth-child(3)').hide();

5.Supprimer une ligne

// 删除除第一行外的所有行
$('#table1 tr:not(
:first
)').remove();
// 删除指定行
$('#table1 tr:eq(3)').remove();

6. Supprimer une colonne

// 删除除第一列外的所有列
$('#table1 tr th:not(:nth-child(1))').remove();
$('#table1 tr td:not(:nth-child(1))').remove();
// 删除第一列
$('#table1 tr td::nth-child(1)').remove();

7. Obtenez (définissez) la valeur d'une certaine cellule

// 设置table1,第2个tr的第一个td的值。  
$('#table1 tr:eq(1) td:nth-child(1)').html('value'); 
// 获取table1,第2个tr的第一个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html();

8 Insérez une ligne

// 在第二个tr后插入一行$('<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>').insertAfter($('#table7 tr:eq(1)'));

9. Obtenez la valeur de la cellule spécifiée dans chaque ligne

var arr = [];
$('#table1 tr td:nth-child(1)').each(function (key, value) {
   arr.push($(this).html());
});
var result = arr.join(',');

10. Sélectionnez tout ou rien

//方法零：
$('#all').on('click', function () {
    $('input.checkSub').prop('checked', this.checked); // 给当前一起绑定的子选择添加效果
});
//方法一：
//全选或全不选 此传入的参数为event 如：checkAll(event)
function checkAll(evt){
 evt=evt?evt:window.event;
 var chall=evt.target?evt.target:evt.srcElement;
 var tbl=$("#table1");
 var trlist=tbl.find("tr");
 for(var i=1;i<trlist.length;i++){
  var tr=$(trlist[i]);
  var input=tr.find("INPUT[type=&#39;checkbox&#39;]");
  input.attr("checked",chall.checked);
 }
}
//方法二：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt){
 var tbl=$("#table1");
 var trlist=tbl.find("tr");
 for(var i=1;i<trlist.length;i++){
  var tr=$(trlist[i]);
  var input=tr.find("INPUT[type=&#39;checkbox&#39;]");
  input.attr("checked",evt.checked);
 }
}
//方法三：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt){
    $("#table1 tr").find("input[type=&#39;checkbox&#39;]").each(function(i){
     $(this).attr("checked",evt.checked)
    });
}
//方法四：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt){
    $("#table1 tr").find("input[type=&#39;checkbox&#39;]").attr("checked",evt.checked);
}

11. ajouter des lignes

function btnAddRow(){
    //行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2
    var rownum=$("#table1 tr").length-2;
        var chk="<input type=&#39;checkbox&#39; id=&#39;chk_"+rownum+"&#39; name=&#39;chk_"+rownum+"&#39;/>";
    var text="<input type=&#39;text&#39; id=&#39;txt_"+rownum+"&#39; name=&#39;txt_"+rownum+"&#39; width=&#39;75px&#39;/>";
    var sel="<select id=&#39;sel_"+rownum+"&#39;><option value=&#39;1&#39;>男</option><option value=&#39;0&#39;>女</option></select>";
    var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
    $(row).insertAfter($("#table1 tr:eq("+rownum+")"));   
}

12. Le client supprime une ligne

每次只能删除一行，删除多行时出错
function btn
Delete
Row(){
   $("#table1 tr").find("input[type='checkbox']").each(function(i){
    if($(this).attr("checked")){ 
     if(i!=0){//不能删除行标题       
     $("#table1 tr:eq("+i+")").remove();
     }
    }
   });
}

C'est mieux que ce qui précède, vous pouvez supprimer plusieurs enregistrements à la fois

function btnDeleteRow(){
   $("#table1 tr").each(function(i){
       var chk=$(this).find("input[type='checkbox']");
       if(chk.attr("id")!="checkall"){//不能删除标题行       
     if(chk.attr("checked")){
     $(this).remove();
     }
       }
    });
}

13. Économisez sur le client

function btnSaveClick(){
   //find()方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值
   //$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
   //alert($(this).val());
   //});             
   $("#table1 tr").find("td").each(function(i){
      if($(this).find("input[type='text']").length>0){
          alert($(this).find("input[type='text']").val());
      }else if($(this).find("select").length>0)
      {
          alert($(this).find("select").val());
      }
    });
}

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus passionnantes, veuillez faire attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

jquery alterne les lignes pour ajouter des styles aux tableaux

Méthode JS pour convertir XML et JSON entre eux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!