Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah dan memadam lajur jadual dengan jQuery_jquery

Bagaimana untuk menambah dan memadam lajur jadual dengan jQuery_jquery

WBOYasal: 2016-05-16 15:13:001426semak imbas

Contoh dalam artikel ini menerangkan kaedah jQuery untuk menambah dan memadam lajur jadual. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Mari kita lihat pemaparan operasi dahulu:

Kod lengkap adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function addCol() {
  $th = $("<th>增加的列头</th>");
  $col = $("<td>增加的列</td>");
  $("#tab1>thead>tr").append($th);
  $("#tab1>tbody>tr").append($col);
}
function delCol() {
  //移除最后一列
  $("#tab1 tr :last-child").remove();
  //移除第一列
  //$("#tab1 tr :first-child").remove();
  //移除指定的列, 注:这种索引从1开始
  //$("#tab1 tr :nth-child(2)").remove();
  //移除第一列之外的列
  //$("#tab1 tr :not(:nth-child(1))").remove();
}
// --></script>
</head>
<body>
<input id="Button1" type="button" onclick="addCol()" value="增加列" />
<input id="Button2" type="button" onclick="delCol()" value="减少列" />
  <table id="tab1" border="1" style="width: 200px;">
    <thead>
    <tr>
      <th>
        Id</th>
      <th>
        Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>
        1</td>
      <td>
        叶子</td>
    </tr>
    <tr>
      <td>
        2</td>
      <td>
        王子</td>
    </tr>
    </tbody>
  </table>
</body>
</html>

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Kesan seret JQuery dan ringkasan kemahiran", "ringkasan kemahiran sambungan jQuery" , "ringkasan kesan khas klasik biasa JQuery", "animasi jQuery dan ringkasan penggunaan kesan khas", "ringkasan penggunaan pemilih jquery" dan "jQuery pemalam biasa dan ringkasan penggunaan》

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript menetapkan paparan imej lalai dengan menggunakan onerror dan bukannya helah alt_javascriptArtikel seterusnya：JavaScript menetapkan paparan imej lalai dengan menggunakan onerror dan bukannya helah alt_javascript

Artikel berkaitan

Lihat lagi