Opérations de base de la table Jquery-js tutoriel-php.cn

Opérations de base de la table Jquery

巴扎黑

Libérer： 2017-06-26 14:35:02

original

1167 Les gens l'ont consulté

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;
 }

Copier après la connexion

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

1. Déplacez la souris sur la ligne pour changer la couleur de fond :

Ajoutez un style CSS :

.hover
{
  background-color: #cccc00;
}

Copier après la connexion

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

Copier après la connexion

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; }

Copier après la connexion

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

Copier après la connexion

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();

Copier après la connexion

(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();

Copier après la connexion

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

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

Copier après la connexion

(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();

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

(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);

Copier après la connexion

(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);

Copier après la connexion

(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();
//结果显示：第二行第三列

Copier après la connexion

(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()+" ";
});
//结果：第一行第二列  第二行第二列  第三行第二列

Copier après la connexion

(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() + " ";
 });
//结果：第二行第一列  第二行第二列  第二行第三列  第二行第四列  第二行第五列

Copier après la connexion

(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();

Copier après la connexion

(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>")

Copier après la connexion

(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();

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

-- = 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!