清除默認HTML表格td值而不會丟失CSS

Question

我在提交表單中有多個具有默認值的HTML表。 表td中的這些值是演示值，因此我想要一個按鈕來清除1個表中的所有值，但保留該表的CSS。 這是我的表：

HTML表格：

我使用此代碼清空表：

更新的代碼

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

但是當我使用這段代碼時，我的表看起來像這樣：

HTML空表：

空HTML表

我也試過這個：

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>

錯誤信息

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 。

而且，我相信如果你沒有為你的單元格設置任何寬度或高度，那么表格就會崩潰（但我不是百分百肯定，這取決於你的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值消失，而表沒有折疊。