Dieses Mal werde ich Ihnen eine Zusammenfassung der jQuery-Operationsmethode geben. Was sind die Vorsichtsmaßnahmen für die jQuery-Operation von Table?
1. Die Zeile ändert ihre Farbe, wenn sich die Maus bewegt
Methode 1: hover(fun(), fun())-Methode in jQuery, Parameter 1: erste Methode Es dient zum Hinzufügen der Stilfunktion, Parameter zwei: Die zweite Methode besteht darin, die Stilfunktion abzubrechen
$("#table1 tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})Nach dem Login kopieren
Methode zwei:
$("#table1 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});Nach dem Login kopieren
2 verschiedene Farben haben
$("#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")Nach dem Login kopieren
3. Eine Zeile ausblenden
$("#table1 tbody tr:eq(3)").hide();Nach dem Login kopieren
Eine Spalte ausblenden
Methode 1:
$("#table1 tr td::nth-child(3)").hide();Nach dem Login kopieren
Methode 2:
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});Nach dem Login kopieren
5. Löschen Sie eine Zeile
//删除除第一行外的所有行
$("#table1 tr:not(:first)").remove();
//删除指定行
$("#table1 tr:eq(3)").remove();Nach dem Login kopieren
6. Eine Spalte löschen
//删除除第一列外的所有列
$("#table1 tr th:not(:nth-child(1))").remove();
$("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td::nth-child(1)").remove();Nach dem Login kopieren
7. Den Wert einer bestimmten Zelle abrufen (festlegen)
//设置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();Nach dem Login kopieren
8. Fügen Sie eine Zeile ein:
//在第二个tr后插入一行
$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));Nach dem Login kopieren
9. Holen Sie sich den Wert der angegebenen Zelle in jeder Zeile
var arr = [];
$("#table1 tr td:nth-child(1)").each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');Nach dem Login kopieren
10. Alle auswählen oder alle deaktivieren
//方法一：
//全选或全不选 此传入的参数为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='checkbox']");
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='checkbox']");
input.attr("checked",evt.checked);
}
}
//方法三：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type='checkbox']").each(function(i){
$(this).attr("checked",evt.checked)
});
}
//方法四：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
}Nach dem Login kopieren
11. Der Client fügt dynamisch Zeilen hinzu und löscht sie
function btnAddRow()
{
//行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2
var rownum=$("#table1 tr").length-2;
var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>";
var sel="<select id='sel_"+rownum+"'><option value='1'>男</option><option value='0'>女</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+")"));
}
//客户端删除一行
//每次只能删除一行，删除多行时出错
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());
}
});
}Nach dem Login kopieren
<style type="text/css">
.hover
{
background-color:red;
}
</style>
<table id="table1" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>
<input type="checkbox" id="checkall" onclick="checkAll1(this)"/>
</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>地址</th>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox1" />
</td>
<td>张三</td>
<td>男</td>
<td>zhangsan</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox2" />
</td>
<td>李四</td>
<td>男</td>
<td>lisi</td>
<td>安庆</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox3" />
</td>
<td>王五</td>
<td>男</td>
<td>beijing</td>
<td>北京</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox4" />
</td>
<td>无名氏</td>
<td>女</td>
<td>wumingshi</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox5" />
</td>
<td>赵老师</td>
<td>男</td>
<td>zhaolaoshi</td>
<td>浙江</td>
</tr>
<tr>
<td colspan="5" align="center">
<input type="button" id="btnAdd" runat="server" value="新增" onclick="btnAddRow()" />
<input type="button" id="btnDelete" runat="server" value="删除" onclick="btnDeleteRow()" />
<input type="button" id="btnSave" runat="server" value="保存" onclick="btnSaveClick()" />
</td>
</tr>
</table>Nach dem Login kopieren
Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Zusammenfassung der Jquery-Operationsobjekt-Array-Element-Methode (mit Groß-/Kleinschreibung)
zu implementierende grep()-Methode Array-Filter
Das obige ist der detaillierte Inhalt vonZusammenfassung der jQuery-Operationstabellenmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
