Remove values from input fields when creating a new table row-CodePudding

I'm trying to create a new role but I want a row where there isn't any value in the textfield.

<form action="Fruits" method="Post" enctype="multipart/form-data">
    <table id="myTable">
    <c:forEach items="${fruits}" var="val" varStatus="count">
    <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </thead>
    <tbody>
      <td><input type="text" name="name" id="name" value="${val.name}"></td>
      <td><input type="text" name="color" id="color" value="${val.color}"></td>
    </tbody>
    </table>
    <button type="button"  onclick="myFunction()">Add</button>
</form>

For now whenever I create a new role, it gives me the values of the first row and fill the text field. Is there a way where I just create a row where it doesnt have any values.

 function myFunction(){
        var table = document.getElementById("myTable");
        var first_tr = table.firstElementChild;
        var second_tr = first_tr.nextElementSibling;
        var tr_clone = first_tr.cloneNode(true);   
        var tb_clone = second_tr.cloneNode(true);
        table.append(tr_clone);
        table.append(tb_clone);
    }

I'm expecting a blank field text for all of the column upon creating a row

CodePudding user response：

Instead of cloning previous rows create a row template using a template/string literal that you can insert before the end of the tbody element.

Note: you don't have any rows in your current table's - you just have two cells. You also can't have multiple cells with the same id. Ids are supposed to be unique within a document. If you have to identify cells separately you should use a data attribute instead.

const rowTmpl = `<tr>
  <td><input type="text" name="name"></td>
  <td><input type="text" name="color"></td>
</tr>`;

const tbody =  document.querySelector('tbody');
const button = document.querySelector('button');

button.addEventListener('click', handleClick);

function handleClick(e) {
  tbody.insertAdjacentHTML('beforeend', rowTmpl);
}

<table>
  <thead>
    <tr><td>Fruit</td><td>Color</td></tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" value="Apple" name="name"></td>
      <td>
        <input type="text" value="Red" name="color">
      </td>
    </tr>
  </tbody>
</table>
<button type="button">Add row</button>

CodePudding user response：

Add below lines in your function.

 let array_of_input = tb_clone.querySelectorAll('input');
  array_of_input.forEach(cur => {
  cur.value = '';
})

Your final function looks like this.

    function myFunction() {
         var table = document.getElementById("myTable");
         var first_tr = table.firstElementChild;
         var second_tr = first_tr.nextElementSibling;
         var tr_clone = first_tr.cloneNode(true);
         var tb_clone = second_tr.cloneNode(true);
         table.append(tr_clone);
         table.append(tb_clone);
         let array_of_input = tb_clone.querySelectorAll('input');
         array_of_input.forEach(cur => {
               cur.value = '';
         })
                   
  }