jQuery_jquery を使用してテーブルを操作するための一般的な方法とテクニックの概要

以下は、テーブルを操作するために jQuery で一般的に使用される 13 個の関数のリストです。

1. マウスを動かすと行の色が変わります

コードをコピーします コードは次のとおりです

$('#table1 tr').hover(function(){

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

方法 2:

コードをコピー コードは次のとおりです:

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

2. 奇数行と偶数行で異なる色

コードをコピーします コードは次のとおりです:

$('#table1 tbody tr:odd').css('background-color', '#bbf');

$('#table1 tbody tr:even').css( 'background-color',' #ffc');
//オペレーションクラス
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass ("even");

3. 行を非表示にする

コードをコピー コードは次のとおりです:

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

4. 列を非表示にします

コードをコピーします コードは次のとおりです:

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

5. row

コードをコピー コードは次のとおりです:

// 最初の行を除くすべての行を削除します。 row

$('#table1 tr:not(:first)') .remove();
//指定された行を削除
$('#table1 tr:eq(3)').remove ();

6. 列を削除します

コードをコピーします コードは次のとおりです以下:

// 最初の列を除くすべての列を削除します

$ ('#table1 tr th:not(:nth-child(1))').remove();
$( '#table1 tr td:not(:nth-child(1))').remove( );
//最初の列を削除
$('#table1 tr td::nth-child(1) ').remove();

7. 特定のセルの値を取得(設定)

コードをコピーします> コードは次のとおりです:// 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. 行を挿入します

コードをコピー コードは次のとおりです:// 2 番目の tr

$('< ;tr>挿入 3 挿入gt;挿入 挿入').insertAfter( $('#table7 tr:eq(1)'));

9. 各行で指定されたセルの値を取得します

コードをコピー コードは次のとおりです:var arr = [];

$('#table1 tr td:nth-child(1) ').each (function (key, value) {

arr.push($(this).html());
});
var result = arr.join(',');

10. すべて選択するか、何も選択しません

コードをコピーします コードは次のとおりです。

//メソッド 0:
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // 現在バインドされているサブ選択にエフェクトを追加します
});

//方法 1:
//すべてを選択するか、すべてを選択しないかを指定します。例: 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 var tr=$(trlist[i]);
var input=tr.find("INPUT[type =' checkbox']");
input.attr("checked",chall.checked);
}
}
//方法 2:
//すべてを選択するか、何も選択しません。渡されるパラメータは次のとおりです: checkAll(this)
function checkAll(evt){
var tbl=$("#table1");
var trlist=tbl.find("tr") ;
for(var i=1;i var tr=$(trlist[i]);
var input=tr.find("INPUT[type=' checkbox ']");
input.attr("checked",evt.checked);
}
}
//方法 3:
//すべてを選択するか、何も選択しません 入力パラメータ例: checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").each(function( i ){
$(this).attr("checked",evt.checked)
});
}
//メソッド 4:
//すべてを選択するか、何も選択しません 渡されたパラメーター例: checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").attr( "checked ",evt.checked);
}

11. クライアントは動的に行を追加します

コードをコピーしますは次のとおりです:

function btnAddRow(){
//行番号は 0 から始まり、最後の行は追加、削除、保存ボタンなので、2
var を減算します。 rownum=$( "#table1 tr").length-2;
var chk="" ;
var text="";
var sel="< ;select id= 'sel_" rownum "'>男性gt;女性gt;";
var row=" " chk " " sel " " テキスト "gt;" テキスト "gt;";
$(row).insertAfter($("#table1 tr:eq(" rownum ") ") ;
コードは次のとおりです:

一度に削除できるのは 1 行のみです。複数の行を削除するとエラーが発生します。function btnDeleteRow(){
$("#table1 tr").find(" input[type='checkbox']").each(function(i){ if($(this).attr("checked")){

if（i！= 0）{//行ヘッダーをより良く削除できません。複数のレコードを一度に削除することができます関数btndeleterow（）{$（ "＃table1 tr"）。各（function（i） { var chk=$(this).find(" input[type='checkbox']"); if(chk.attr("id")!="checkall"){// タイトル行は削除できません if(chk.attr("checked") ; 🎜>

コードをコピー


コードは次のとおりです以下:

function btnSaveClick(){
//find() メソッドで複数のフィルター条件を設定する方法がわからないため、以下の選択リストの値を取得できません
//$(" #table1 tr td").find("input[type='text']" || "select").each(function(i){
//alert($(this). val());
//}); ='text']").length>0){
alert($(this).find("input[type='text']") val()); (this).find("select").length>0)
{
alert($(this).find("select").val());
}
}) ;
}