Home > Web Front-end > HTML Tutorial > How to delete rows from table using JavaScript DOM?

How to delete rows from table using JavaScript DOM?

WBOY
Release: 2023-09-08 09:41:02
forward
1203 people have browsed it

如何使用JavaScript DOM删除表格中的行?

#To delete rows from a table in JavaScript, use the DOM deleteRow() method.

Example

You can try running the following code to understand how to delete rows in the table. This code deletes one line at a time -

Live Demonstration

<!DOCTYPE html>
<html>
   <head>
      <script>
      function captionFunc(x) {
         document.getElementById(x).createCaption().innerHTML = "Demo Caption";
      }
      </script>
   </head>
   <body>
      <table style="border:2px solid black" id="newtable">
         <tr>
            <td>One</td>
            <td>Two</td>
         </tr>
         <tr>
            <td>Three</td>
            <td>Four</td>
         </tr>
         <tr>
            <td>Five</td>
            <td>Six</td>
         </tr>
      </table>
      <p>
         <input type="button" onclick="captionFunc(&#39;newtable&#39;)" value="Display Table Caption">
      </p>
      <p>
         <input type="button" value="Delete Row" onclick="document.getElementById(&#39;newtable&#39;).deleteRow(0)">
      </p>
   </body>
</html>
Copy after login

The above is the detailed content of How to delete rows from table using JavaScript DOM?. For more information, please follow other related articles on the PHP Chinese website!

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template