Очистить стандартные значения 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:

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 исчезают без свертывания таблицы.

Answer 2

Вы можете очистить таблицу с помощью метода querySelectorAll () из javascript, просто используя цикл foreach, как показано ниже:

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

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

Если вы не знакомы с querySelector или querySelector, здесь есть документация: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll. Но я протестировал приведенный выше код, и он сработал.

Вызывайте эту функцию, нажимая пустую кнопку, и просто убедитесь, что ваши ячейки заголовка используют th. тег, а не тд .

Кроме того, я считаю, что если вы не установите ширину или высоту для своих ячеек, таблица просто рухнет (но я не уверен на сто процентов, это зависит от вашего CSS и фреймворков, которые вы используете.используя).

Надеюсь, это поможет!