Bagaimana untuk memadam lajur daripada jadual HTML menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk memadam lajur daripada jadual HTML menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-23 23:57:06

ke hadapan

892 orang telah melayarinya

如何使用 JavaScript 从 HTML 表中删除列？

Dalam HTML, jadual digunakan untuk memaparkan data pada halaman web dalam cara berformat. Jadual mengandungi lajur dan baris yang memaparkan data.

Kadangkala, pembangun perlu memadamkan lajur jadual atau membenarkan pengguna memadamkannya. Sebagai contoh, jadual ini mengandungi data pengguna dan mempunyai lajur "umur" dan "hari lahir". Dalam kes ini, kita perlu mengalih keluar lajur "Umur" kerana kita boleh mendapatkan umur daripada lajur "Hari Lahir".

Pembangun boleh memadam mana-mana lajur tertentu menggunakan kaedah deleteCell(). Dalam tutorial ini, kita akan belajar untuk memadam lajur jadual mengikut indeks, nama kelas dan nama lajur. Selain itu, pembangun harus ingat bahawa lajur jadual ialah indeks berasaskan sifar.

Tatabahasa

Pengguna boleh memadam mana-mana lajur tertentu dalam jadual menggunakan kaedah deleteCell() seperti dalam sintaks berikut.

for (var i = 0; i < rowCount; i++) {
   table.rows[i].deleteCell(index);
}

Salin selepas log masuk

Dalam sintaks di atas, kami mengulangi setiap baris jadual dan mengalih keluar sel daripada "indeks". Di sini, 'indeks' ialah indeks lajur yang akan dipadamkan.

Contoh 1 (Padam lajur jadual mengikut indeks)

Dalam contoh di bawah, kami telah mencipta jadual yang mengandungi nombor perkataan. Selain itu, kami menggayakan jadual dengan menyediakan sempadan dalam CSS. Setiap kali pengguna mengklik butang, kami melaksanakan fungsi deleteColumn().

Dalam fungsi deleteColumn(), kami menggunakan id untuk mengakses jadual. Selain itu, kami menggunakan sifat "baris" untuk mendapatkan semua baris jadual dan menggunakan sifat "panjang" tatasusunan untuk mengira jumlah bilangan baris.

Kami memulakan pembolehubah "indeks" dengan 2 untuk memadamkan lajur ketiga. Selepas itu, kami menggunakan gelung for untuk melelaran melalui semua baris jadual. Kami menggunakan kaedah deleteCell() untuk memadam sel ketiga dalam setiap baris.

Dalam output, pengguna boleh mengklik butang untuk memadam lajur ketiga daripada jadual.

<html>
<head>
   <style>
      table {
          border-collapse: collapse;
        }
        td,
        th {
            border: 1px solid black;
            padding: 8px;
        }
   </style>
</head>
<body>
   <h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
   <table id = "test">
      <tr>
         <th> First </th>
         <th> Second </th>
         <th> Third </th>
         <th> Fourth </th>
      </tr>
      <tr>
         <td> 1 </td>
         <td> 2 </td>
         <td> 3 </td>
         <td> 4 </td>
      </tr>
      <tr>
          <td> 5 </td>
          <td> 6 </td>
          <td> 7 </td>
          <td> 8 </td>
      </tr>
      <tr>
          <td> 9 </td>
          <td> 10 </td>
          <td> 11 </td>
          <td> 12 </td>
      </tr>
    </table>
    <br> <br>
    <button onclick = "deleteColumn()"> Delete Column </button>
    <script>
        function deleteColumn() {
            var table = document.getElementById("test");
            var rowCount = table.rows.length;
            let index = 2;
            for (var i = 0; i < rowCount; i++) {
                table.rows[i].deleteCell(index);
            }
        }
   </script>
</html>

Salin selepas log masuk

Contoh 2 (Alih keluar lajur jadual mengikut teks pengepala)

Dalam contoh di bawah, kami telah mencipta jadual yang mengandungi data makanan. Dalam contoh ini, kami memadamkan lajur jadual menggunakan teks pengepala.

Dalam fungsi deleteColum(), kami mengakses tajuk jadual. Selepas itu kami mengakses semua baris pengepala. Seterusnya, kami mengulangi baris pengepala dan mencari indeks pengepala yang mengandungi "Kalori" sebagai HTML dalaman.

Selepas mencari indeks lajur, kita boleh menggunakan gelung for dan kaedah tableCell() untuk memadam sel tertentu daripada setiap baris, seperti yang kita lakukan dalam contoh pertama.

Dalam output, pengguna perlu mengklik butang untuk memadam lajur "Kalori".

<html>
<head>
   <style>
       table {border-collapse: collapse;}
       td, th {border: 1px solid black; padding: 8px; }
   </style>
</head>
<body>
   <h3>Using the <i>deleteCell() method</i> to delete the table columns using JavaScript </h3>
   <table id="food">
      <tr> 
         <th>Food Name</th>
         <th>Price</th>
         <th>Calories</th>
      </tr>
      <tr>
          <td>Apple</td>
          <td>99</td>
          <td>95</td>
      </tr>
      <tr>
          <td>Banana</td>
          <td>89</td>
          <td>105</td>
      </tr>
      <tr>
          <td>Orange</td>
          <td>79</td>
          <td>85</td>
      </tr>
   </table>
   <br> <br>
   <script>
      function deleteColumn() {
         //  get a table
         var table = document.getElementById('food');
         // get header row
         var headerRow = table.getElementsByTagName('tr')[0];
         // get headers
         var headers = headerRow.getElementsByTagName('th');
         // find column index
         for (var i = 0; i < headers.length; i++) {
             if (headers[i].innerHTML === "Calories") {
                var columnIndex = i;
                break;
                }
            }
            // use column index to delete cells
            if (columnIndex !== undefined) {
               var rowCount = table.rows.length;
               for (var i = 0; i < rowCount; i++) {
               table.rows[i].deleteCell(columnIndex);
                }
            }
        }
   </script>
   <button onclick="deleteColumn()">Delete Column</button>
</body>
</html>

Salin selepas log masuk

Contoh 3 (Padam berbilang lajur jadual mengikut nama kelas)

Dalam contoh berikut, kita akan belajar memadam berbilang lajur jadual menggunakan nama kelas.

Di sini, kami mula-mula mengakses semua baris jadual dan kemudian mengulanginya menggunakan gelung for. Selepas itu kami mengakses semua sel baris tertentu yang mengandungi nama kelas "tambahan". Kami menggunakan gelung sementara untuk menggelungkan semua sel dan mengalih keluar semua sel satu demi satu menggunakan "cells[0].parentNode.removeChild(cells[0])".

Dalam kod di atas, sel[0] ialah sel semasa. "parentNode" merujuk kepada barisnya di mana kaedah removeChild() mengalih keluar nod anak.

Dalam output, pengguna boleh memadamkan berbilang lajur daripada jadual dengan mengklik pada butang.

<html>
<head>
    <style>
        table { border-collapse: collapse;}
        td, th {border: 1px solid black; padding: 8px;}
    </style>
</head>
<body>
    <h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
    <table id = "HTMLtable">
        <tr>
            <th> Column 1 </th>
            <th class = "extra"> Column 2 </th>
            <th >Column 3 </th>
            <th class = "extra"> Column 4 </th>
        </tr>
        <tr>
            <td> Row 1, Column 1 </td>
            <td class = "extra"> Row 1, Column 2 </td>
            <td> Row 1, Column 3 </td>
            <td class = "extra"> Row 1, Column 4 </td>
        </tr>
        <tr>
            <td> Row 2, Column 1 </td>
            <td class = "extra"> Row 2, Column 2 </td>
            <td> Row 2, Column 3 </td>
            <td class = "extra"> Row 2, Column 4 </td>
        </tr>
        <tr> 
            <td> Row 3, Column 1 </td>
            <td class = "extra"> Row 3, Column 2 </td>
            <td> Row 3, Column 3 </td>
            <td class = "extra"> Row 3, Column 4 </td>
    </table>  <br> <br>
    <button onclick="deleteColumn()"> Delete Column </button>
    <script>
        function deleteColumn() {
            var table = document.getElementById('HTMLtable');
            var rows = table.getElementsByTagName('tr');
            // iterate through rows
            for (var i = 0; i < rows.length; i++) {
                // get cells with className 'extra'
                var cells = rows[i].getElementsByClassName('extra');
                // delete cells 
                while (cells.length > 0) {
                    cells[0].parentNode.removeChild(cells[0]);
                }
            }
        }
    </script>
</html>

Salin selepas log masuk

Kami belajar memadam lajur daripada jadual menggunakan JavaScript. Kami menggunakan kaedah deleteCeil() dalam 2 contoh pertama dengan menghantar indeks lajur sebagai parameter. Dalam contoh ketiga, kami menggunakan kaedah removeChild() untuk mengalih keluar sel tertentu.

Atas ialah kandungan terperinci Bagaimana untuk memadam lajur daripada jadual HTML menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!