Question

我用过这个：

＆＃13;

<html>
    <head>
        <title>Table Time</title>
    </head>
    
    <body>
        
        <table border="1px">
            <tr>
                <td>One</td>
            </tr>
                <td>Two</td>
            <tr>
                <td>Three</td>
            </tr>
            
            <tr>
                
            </tr>
        </table>
        
    </body>

</html>

＆＃13;

创建表格。如何使用代码删除表格？我是否必须使用＆＃34; id＆＃34;为表声明变量？或者我是否必须做其他事情，以及删除表格的代码行是什么。谢谢！

Answer 1

纯JS解决方案：

var el = document.getElementById("tableID");
el.parentElement.removeChild(el);

Functional CodePen

Answer 2

我们假设您的table的ID为tableID。

使用jQuery：

$("#tableID").remove();

使用Javascript：

var table = document.getElementById("tableID");
table.parentNode.removeChild(table);

Answer 3

一种常见的方法是为表创建一个包装器，然后用新的HTML替换包装器的内部HTML。例如：

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <div id="table-wrapper">
        <table border="1px">
            <tr>
                <td>One</td>
            </tr>
                <td>Two</td>
            <tr>
                <td>Three</td>
            </tr>
            <tr>
            </tr>
        </table>
        </div>
       <button type="button" id="button">Button</button>
    </body>
</html>

    <script type="text/javascript">
        $(document).ready(function () {
             $('#button').click(function () {
                 $('#table-wrapper').html('No records found.');
             });
        });
    </script>

这是相应的JSFiddle： https://jsfiddle.net/mwatz122/ws0j3xma/

Answer 4

Here is the link to the JSFiddleDemo

这不是必需的，但最佳做法是使用thead，tbody，th标记格式化您的表格。

// HTML

<body>
   <table id='mytable'>
     <thead>
       <tr>
         <th>Table Head 1</th>
         <th>Table Head 2</th>
         <th>Table Head 3</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
       </tr>
       <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
       </tr>
      </tbody>
  </table>
  <button id='mybutton'>Remove Table</button>
</body>

// JS

//WHEN THE DOCUMENT LOADS RUN THIS FUNCTION 
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        var btn = document.getElementById('mybutton'); //GET THE BUTTON AND SET IT TO A VARIABLE IN JS
        btn.addEventListener('click', removeTable);  //ADD A 'CLICK' EVENT LISTENERS, WHEN THE USER CLICKS IT WILL RUN THE FUNCTION 'removeTable'
    }
}
function removeTable(){
    var table = document.getElementById('mytable'); //GET THE TABLE SET TO VARIABLE IN JS
  document.body.removeChild(table); //REMOVE THE TABLE FROM THE DOCUMENT BODY
}

Answer 5

如果您不使用jquery，可以使用javascript

将此添加到您的脑袋

<script>
    function hidetable(which){
    document.getElementById((which).style.display = 'none';
    }
</script>

只需将其添加到元素

即可

<div onClick="hidetable('tablename')"></div>

Answer 6

您可以使用javascript 删除表格

</head>
<body>

<p>Click the button to remove the first row in the table.</p>

<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br> 

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.getElementById("myTable").deleteRow(0);
}
</script>

</body>
</html>
  [![enter image description here][1]][1]

Answer 7

您可以添加一个html按钮并提供您选择的表格和按钮ID，例如

<button id="removeTableButton">Save</button>
<table border="1px" id="myTable">
<... rows and data ...>
</table>

在底部添加一个junc文件，如func.js。

<script type="text/javascript" src="func.js"></script>
</body>
</html>

在func.js中，你可以添加一个eventListener（），当你点击按钮时，它会执行一个函数。

document.getElementById("removeTableButton").addEventListener("click", function () {
    var table = document.getElementById("myTable");
    table.innerHtml = "";
});

如何删除我编入的表格？

7 个答案: