Question

我在提交表单中有多个带有默认值的HTML表。表td中的这些值是演示值，因此我想要一个按钮来清除1个表中的所有值，但保留该表的CSS。这是我的桌子：

HTML表格：

我使用以下代码清空表格：

更新的代码

<button>Empty</button>
  <script>
    $( "button" ).click(function() {
        $("#table1").find("td").empty();
    });
</script>

但是当我使用此代码时，我的表如下所示：

HTML空表：

empty HTML table

我也尝试过：

document.getElementById("flagTotal").innerHTML = "";

但是然后，“空”按钮想要提交表单，而不是提交按钮。...

有人可以给我提供解决方案/提示吗？

更新

最小代码：

div class="table-responsive">
            <table id="table1" class="table table-sw table-bordered">
                <tbody id="tablekrw">
                <tr id="tablehead"><th>Sw</th><th>Krw</th></tr>
                <tr><td><input type="text" class="td-sw" name="sw1[]" value="0.15" id="default-td"></td>
                    <td><input class="td-sw" type="text" name="krw[]" value="0.0"></td></tr>
                <tr><td><input type="text" class="td-sw" name="sw1[]" value="0.18" id="default-td"></td>
                    <td><input class="td-sw" type="text" name="krw[]" value="3.00E-05"></td></tr>
                <tr><td><label><button>Empty</button></label></td></tr>
</table>

  <table id="table-right" class="table table-bordered">
                <tr><td><input class="btn btn-primary" type="submit" value="Submit" name="submit"></td></tr>
                <tr><td colspan="2" class="td"><label for="reset" class="label">Reset this form to original
                            values:</label></td>
                    <td><input class="btn btn-primary" type="reset" value="Reset"</tr>
            </table>

Error message

Answer 1

您可以使用javascript中的querySelectorAll（）方法通过仅使用foreach循环来清理表，如下所示：

function cleanTable() {
    var fields = document.querySelectorAll("#table td");

    fields.forEach(cell => {
      cell.innerHTML = "";
    });
  }

如果您不熟悉querySelector或querySelectorAll，这里是文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll。但是我测试了上面的代码，它起作用了。

在单击空按钮时调用此函数，只需确保您的标题单元格使用的是 th 标记，而不是 td < / em> 。

而且，我相信，如果您不为单元格设置任何宽度或高度，则表将折叠（但我不是百分百确定的，这取决于您的CSS和所使用的框架）。

希望可以提供帮助！

Answer 2

我找到了解决我问题的方法。 JavaScript：

function emptyTable() {
$('#empty1').click( function() {
    $(this).closest('table').find('input').val('');
});
}

HTML：

<tr><td><button type="button" id="empty1">empty Sw, Krw table</button></td></tr>

<script>emptyTable();</script>

现在表td值消失了，而表没有崩溃。

清除默认的HTML表td值，而不会丢失CSS

2 个答案: