Explication détaillée des étapes pour faire fonctionner la table avec jquery-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-25 10:12:40

original

2319 Les gens l'ont consulté

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')
});

Copier après la connexion

Méthode 2 :

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

Copier après la connexion

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");

Copier après la connexion

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

Copier après la connexion

4. Masquer une colonne

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

Copier après la connexion

5.Supprimer une ligne

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

8 Insérez une ligne

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

Copier après la connexion

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(',');

Copier après la connexion

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

Copier après la connexion

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+")"));   
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!