jQuery 작업 테이블 메서드 요약
- php中世界最好的语言원래의
- 2018-04-24 09:54:081584검색
이번에는 jQuery의 Table 조작 방법에 대해 정리해보겠습니다. jQuery Table 조작의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
1. 마우스가 움직일 때 행의 색상이 변경됩니다.
방법 1: jQuery의 hover(fun(), fun()) 메서드, 매개 변수 1: 첫 번째 방법은 스타일 함수를 추가하는 것, 매개 변수 2: 두 번째 방법은 스타일 기능을 취소하는 것입니다
$("#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();4. 열 숨기기
방법 1:
$("#table1 tr td::nth-child(3)").hide();
방법 2:
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});5. 행 삭제
//删除除第一行外的所有行
$("#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. a의 가치 특정 셀
//设置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. 행 삽입:
//在第二个tr后插入一行
$("a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c插入3b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c插入b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c插入b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c插入b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5").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. 모두 선택하거나 모두 선택하지 않습니다
//方法一：
//全选或全不选 此传入的参数为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;i2daebf55d58d8d233fbd4fc027e40d97";
var text="495cbffaef69ee8c8599694f57079abb";
var sel="07dd84e2b63e2bf9d1512db3dcd37ce8a97732aa835093708c3240487f4db46b男4afa15d3069109ac30911f04c56f333833b75806bd15fdc75e33f3c4299337a5女4afa15d3069109ac30911f04c56f333818bb6ffaf0152bbe49cd8a3620346341";
var row="a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c"+chk+"b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c"+text+"b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c"+sel+"b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c"+text+"b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c"+text+"b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
}
//客户端删除一行
//每次只能删除一行，删除多行时出错
function btnDeleteRow()
{
$("#table1 tr").find("input[type='checkbox']").each(function(i){
if($(this).attr("checked"))
{
if(i!=0)//不能删除行标题
{
$("#table1 tr:eq("+i+")").remove();
}
}
});
}
//这个比上面的要好，可以一下删除多个记录
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();
}
}
});
}
//客户端保存
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());
}
});
}
46d5fe1c7617e3914f214aaf043f4ccf
.hover
{
background-color:red;
}
531ac245ce3e4fe3d50054a55f265927
23fe0263b682d11b6362f7fdc28ca899
a34de1251f0d9fe1e645927f19a896e8
b4d429308760b6c2d20d6300079ed38e
49ccdbc9f3ee0ff64f125f7048b1013e
01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e姓名01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e性别01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e密码01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e地址01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
36db48e7b0e50b08f213c41a030d94b4
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c张三b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1czhangsanb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c上海b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
2e6cd4897d4afca4f7438be274076cf6
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c李四b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1clisib90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c安庆b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
57aa45e773995a8e992982069ac5a8e6
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c王五b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cbeijingb90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c北京b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
cb156e62e5bb9a6cb22524d4b6241bf1
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c无名氏b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c女b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cwumingshib90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c上海b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
2559f9a95ac0befe6e3d6524e2c16d4c
b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c赵老师b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c男b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1czhaolaoshib90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c浙江b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
e77292f32b245f9a9aba5a990432da2e
669c4eb54fb78d1b3d4aa7a1c658e5fc
ff07c8a390de24e525254ac6b7c0d999
db3b1f4cf55b52b93946e09641b0d544
b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
이 기사를 읽으신 것 같습니다. 이 기사의 경우 방법을 마스터하셨으므로 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
추천 도서:
Jquery 연산 객체 배열 요소 메소드 요약(대소문자 포함)
위 내용은 jQuery 작업 테이블 메서드 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.