Clear default HTML table td values without losing CSS

Question

I have multiple HTML tables in a submit form with default values. These values in the table td are demo values and therefore I want a button to clear all values in 1 table, but keeping the CSS of that table. This is my table:

HTML table:

I use this code for empty the table:

updated code

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

But when I use this code, my table looks like this:

HTML empty table:

empty HTML table

I also tried this:

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

But then the "empty" button wants to submit the form instead of the submit button....?

Can someone provide me with a solution/ tip?

Update

Minimal code:

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

You can clean the table using the querySelectorAll() method from javascript by just using a foreach loop as the following:

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

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

If you're not familiar with the querySelector or querySelectorAll here is the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll . But I tested the code above and it worked.

Call this function when clicking in the empty button, and just make sure your title cells are using the th tag and not the td .

And also, I believe that if you do not set any width or height for your cells the table will just collapse (but I am not a hundred percent sure, it depends on your css and the frameworks you're using).

Hope it can help!

Answer 2

I found an answer to my problem. 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>

Now the table td values dissapear without the table collapsing.