Explication détaillée des opérations de base de la table jQuery

Cet article présente principalement les opérations de base de la table jQuery (Table) et analyse les styles de table courants de jQuery, les attributs, l'ajout et la suppression de lignes et d'autres techniques de fonctionnement associées sous forme d'exemples. Les amis dans le besoin peuvent s'y référer. j'espère que cela pourra aider tout le monde.

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

<table>
    <tr>
      <th style="width: 160px;">表头一</th>
      <th style="width: 160px;">表头二 </th>
      <th style="width: 160px;">表头三</th>
      <th style="width: 160px;">表头四</th>
      <th style="width: 160px;">表头五</th>
    </tr>
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
      <td>第一行第三列</td>
      <td>第一行第四列</td>
      <td>第一行第五列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
      <td>第二行第三列</td>
      <td>第二行第四列</td>
      <td>第二行第五列</td>
    </tr>
    <tr>
      <td>第三行第一列</td>
      <td>第三行第二列</td>
      <td>第三行第三列</td>
      <td>第三行第四列</td>
      <td>第三行第五列</td>
    </tr>
    <tr>
      <td>第四行第一列</td>
      <td>第四行第二列</td>
      <td>第四行第三列</td>
      <td>第四行第四列</td>
      <td>第四行第五列</td>
    </tr>
</table>

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. Décoloration des lignes paires et impaires du 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")
});

Affichage des résultats :

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 une colonne, 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) Supprimez les 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, telles que 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 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 les colonnes, par exemple en masquant 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 du tableau :

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

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

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

( 9) Récupérez la valeur de la cellule, Par exemple, la deuxième ligne et la troisième colonne :

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

(10) Récupérez 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) Récupère 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) Fusionner les cellules de la ligne, par exemple en fusionnant la première ligne. Les 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) Divisez les cellules de ligne et restaurez 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) Fusionnez les cellules de colonne, par exemple en fusionnant 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) Diviser les cellules de la colonne, comme restaurer 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) pour chaque cellule Ajoutez un événement de clic à la 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) + "列");
  })
});

Recommandations associées :

jquery Explication détaillée des exemples de code de chargement direct de table et de chargement paresseux

Partage encore une fois de 18 superbes tables jQuery plug-ins_jquery

Changement de couleur des lignes de la table jQuery Trois méthodes d'implémentation_jquery

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!