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
WBOYforward
2023-09-08 09:41:021193browse

如何使用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>

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!

Statement:
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete