Grundlegende Operationen von Jquery Table

Jquery ist sehr praktisch für die Bedienung der HTML-Tabelle. Hier finden Sie eine kurze Zusammenfassung der grundlegenden Operationen der Tabelle.

Erstellen Sie zunächst ein allgemeines Tabellen-CSS und eine Tabelle:

table
{
    border-collapse: collapse;
    border-spacing: 0;
    margin-right: auto;
    margin-left: auto;
    width: 800px;
 }
 th, td
 {
    border: 1px solid #b5d6e6;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    height: 20px;
 }
 th
 {
    background-color: Gray;
 }

                                                                                                                                                                                                                                                                                                                                                                                                                              

表头一	表头二	表头三	表头四	表头五
第一行第一列	第一行第二列	第一行第三列	第一行第四列	第一行第五列
第二行第一列	第二行第二列	第二行第三列	第二行第四列	第二行第五列
第三行第一列	第三行第二列	第三行第三列	第三行第四列	第三行第五列
第四行第一列	第四行第二列	第四行第三列	第四行第四列	第四行第五列

1. Bewegen Sie die Maus in die Zeile, um die Hintergrundfarbe zu ändern:

CSS-Stil hinzufügen:

.hover
{
  background-color: #cccc00;
}

Js-Skript:

$(document).ready(function () {
    //鼠标移动到行变色,单独建立css类hover
    //tr:gt(0):表示获取大于 tr index 为0 的所有tr，即不包括表头
    $("#table1 tr:gt(0)").hover(
    function () { $(this).addClass("hover") },
    function () { $(this).removeClass("hover") })
});

Ergebnis Ausführungsergebnis:

2. Ändern Sie die Farbe der ungeraden und geraden Zeilen in der Tabelle:

CSS für ungerade und gerade Zeilen:

.odd{ background-color: #bbf;}
.even{ background-color:#ffc; }

Js-Skript :

$(document).ready(function () {
    //奇偶行不同颜色
    $("#table2 tbody tr:odd").addClass("odd"),
    $("#table2 tbody tr:even").addClass("even")
    //或者
    //$("#table2 tbody tr:odd").css("background-color", "#bbf"),
    //$("#table2 tbody tr:even").css("background-color", "#ffc")
});

Das Ergebnis zeigt:

3. Grundoperationen:

(1) Zeilen löschen, z. B. die zweite Zeile in der Tabelle löschen:

//删除指定行（第二行）
 $("#table3 tr:gt(0):eq(1)").remove();

(2) Spalten löschen, z. B. die zweite Spalte in der Tabelle löschen:

//eq:获取子元素索引从 0 开始，先删除表头
$("#table3 tr th:eq(1)").remove();
//nth-child:获取子元素从 1 开始
$("#table3 tr td:nth-child(2)").remove();

(3) Andere Zeilen löschen, z. B. alle Zeilen außer die zweite Zeile:

 $("#table3 tr:gt(0):not(:eq(1))").remove();

(4) Löschen Sie andere Spalten, z. B. alle Spalten außer der zweiten Spalte:

//先删除表头
$("#table3 tr th:not(:eq(1))").remove();
$("#table3 tr td:not(:nth-child(2))").remove();

(5) Zeilen ausblenden, z. B. die erste zweite Zeile ausblenden:

 $("#table3 tr:gt(0):eq(1)").hide();
//或者
//$("#table3 tr:gt(0):eq(1)").css("display", "none")
//显示
//$("#table3 tr:gt(0):eq(1)").css("display", "");

(6) Spalte ausblenden, z. B. die zweite Spalte ausblenden:

 $("#table3 tr th:eq(1)").hide();
 $("#table3 tr td:nth-child(2)").hide();
//或者
//$("#table3 tr th:eq(1)").css("display", "none");
//$("#table3 tr td:nth-child(2)").css("display", "none");
//显示
//$("#table3 tr th:eq(1)").css("display", "");
//$("#table3 tr td:nth-child(2)").css("display", "");

(7) Fügen Sie eine neue Zeile an der letzten Position von ein die Tabelle:

var newRow = "<tr>
<td>新行第一列</td>
<td>新行第二列</td>
<td>新行第三列</td>
<td>新行第四列</td>
<td>新行第五列</td>
</tr>";
$("#table3 tr:last").after(newRow);

(8) Fügen Sie eine Zeile nach der zweiten Zeile ein:

var newRow = "<tr>
<td>新行第一列</td>
<td>新行第二列</td>
<td>新行第三列</td>
<td>新行第四列</td>
<td>新行第五列</td>
</tr>";
$("#table3 tr:gt(0):eq(1)").after(newRow);

(9) Holen Sie sich den Wert B. der zweiten Zeile und der dritten Spalte:

var v = $("#table3 tr:gt(0):eq(1) td:eq(2)").text();
//结果显示：第二行第三列

(10) Rufen Sie alle Werte in einer Spalte ab, z. B. der zweiten Spalte:

var v = "";
 $("#table3 tr td:nth-child(2)").each(function () {
        v += $(this).text()+" ";
});
//结果：第一行第二列  第二行第二列  第三行第二列

(11) Holen Sie sich alle Werte in einer Zeile, z. B. die zweite Zeile:

 var v = "";
 $("#table3 tr:gt(0):eq(1) td").each(function () {
        v += $(this).text() + " ";
 });
//结果：第二行第一列  第二行第二列  第二行第三列  第二行第四列  第二行第五列

(12) Zusammenführen Zeilenzellen, z. B. Zusammenführen der zweiten und dritten Zelle der zweiten Zeile:

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 2);
$("#table3 tr:gt(0):eq(1) td:eq(2)").remove();

(13) Teilen Sie Zeilenzellen und stellen Sie die zusammengeführten Zellen oben wieder her:

//注意不能使用
//$("#table3 tr:gt(0):eq(1) td:eq(1)").removeAttr("colspan");
 $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 1);
 $("#table3 tr:gt(0):eq(1) td:eq(1)").after("<td>第二行第三列</td>")

(14) Spaltenzellen zusammenführen, z. B. die erste Die zweite Zelle und die dritte Zelle in der zweiten Spalte

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 2);
$("#table3 tr:gt(0):eq(2) td:eq(1)").remove();

(15) Teilen Sie die Spaltenzellen auf, stellen Sie beispielsweise die oben gerade zusammengeführten Zellen wieder her:

 $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 1);
//在下面行第一个单元格后插入单元格
 $("#table3 tr:gt(0):eq(2) td:eq(0)").after("<td>第三行第二列</td>");

(16) Fügen Sie jeder Zelle ein Klickereignis hinzu und zeigen Sie den Zeilenindex und den Spaltenindex von an die Zelle:

$(document).ready(function () {
    //点击#table3 的单元格返回 单元格索引
    $("#table3 td").click(function () {
        var tdSeq = $(this).parent().find("td").index($(this));
        var trSeq = $(this).parent().parent().find("tr").index($(this).parent());
        alert("第" + (trSeq) + "行，第" + (tdSeq+1) + "列");
    })
});

-- = Quellcode-Download=--

Autor: Rising Sun

Quelle:

Das Urheberrecht dieses Artikels liegt beim Autor und dem Blogpark. Ein Nachdruck ist willkommen, diese Aussage muss jedoch sein ohne Zustimmung des Autors gespeichert werden und einen Link zum Originaltext an einer gut sichtbaren Stelle auf der Artikelseite bereitstellen, andernfalls behalten wir uns das Recht vor, eine rechtliche Haftung einzuleiten.

Das obige ist der detaillierte Inhalt vonGrundlegende Operationen von Jquery Table. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!