Opérations de base de la table Jquery

Jquery est très pratique pour faire fonctionner la table Html. Voici un bref résumé des opérations de base de la table.

Créez d'abord un tableau général CSS et un tableau :

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. Déplacez la souris sur la ligne pour changer la couleur de fond :

Ajoutez un style CSS :

.hover
{
  background-color: #cccc00;
}

Script Js :

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

Résultat Résultat d'exécution :

2. Changer la couleur des lignes paires et impaires dans le tableau :

Lignes paires et impaires css :

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

Script Js :

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

Le résultat montre :

3. Opérations de base :

(1) Supprimer des lignes, comme la suppression de la deuxième ligne du tableau :

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

(2) Supprimer des colonnes, par exemple en supprimant la deuxième colonne du tableau :

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

(3) Supprimer d'autres lignes, telles que toutes les lignes sauf la deuxième ligne :

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

(4) Supprimez les autres colonnes, comme toutes les colonnes sauf la deuxième colonne :

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

(5) Masquer les lignes, par exemple en masquant la première Deuxième ligne :

 $("#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) Masquer la colonne, par exemple, masquer la deuxième colonne :

 $("#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) Insérer une nouvelle ligne à la dernière position de le tableau :

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

(8) Insérer une ligne après la deuxième ligne :

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

(9) Récupérer la valeur de la cellule, comme la deuxième ligne et la troisième colonne :

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

(10) Obtenez toutes les valeurs d'une colonne, comme la deuxième colonne :

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

(11) Obtenez toutes les valeurs d'une ligne, comme la deuxième ligne :

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

(12) Fusion cellules de ligne, comme la fusion des deuxième et troisième cellules de la deuxième ligne :

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

(13) Diviser les cellules de ligne et restaurer les cellules fusionnées ci-dessus :

//注意不能使用
//$("#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) Fusionner les cellules de la colonne, par exemple en fusionnant la première La deuxième cellule et la troisième cellule de la deuxième colonne

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

(15) Divisez les cellules de la colonne, par exemple, restaurez les cellules qui viennent d'être fusionnées ci-dessus :

 $("#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) Ajoutez un événement de clic à chaque cellule et affichez l'index de ligne et l'index de colonne de la cellule :

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

-- = Téléchargement du code source =--

Auteur : Rising Sun

Source :

Le droit d'auteur de cet article appartient à l'auteur et au parc du blog. La réimpression est la bienvenue, mais cette déclaration doit l'être. conservé sans le consentement de l'auteur. Et fournir un lien vers le texte original dans un endroit évident sur la page de l'article, sinon nous nous réservons le droit de poursuivre notre responsabilité légale.

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!