это мой код добавления в корзину, когда я нажимаю на кнопку «Добавить в корзину», я получаю дополнительную пустую строку, которую я не хочу

Question

Это код таблицы, в которую пользователь вводит данные:

<table id = "form">
<td> <select name = "Colour" id ="Colour">
<option>blue</option>
<option>pink</option>
<option>orange</option>
<option>red</option>
</select></td>
<td> <select name = "Organize" id ="Organize">
<option>preethi enterprise</option>
<option>prasanna enterprise</option>
</select></td>
<td> <input type ="text" name ="Company" id ="Company"></td>
<td><input type ="text" name ="Subdivision" id ="Subdivision"></td>
</table>

Это код таблицы, когда пользователь нажимает кнопку «Добавить в корзину», он должен сохраняться в этой таблице:

<table id="cart">
<tr>
<th><label>Colour</label></th>
<th><label>Organize</label></th>
<th><label>Company</label></th>
<th><label>Subdivision</label></th>
</tr>
<tr>
<td><input type = "text" readonly></td>
<td><input type = "text" readonly></td>
<td><input type = "text" readonly></td>
<td><input type = "text" readonly></td>
<td><input type ="button" value ="remove" onclick="remove(this)"/></td>
</tr>
</table>

Это код для addTo ():

function addTo() { // to add rows and copy value to cart
  var table = document.getElementById('cart');
  var new_row = table.rows[1].cloneNode(true); // clones the first row 
  var len = table.rows.length;  // number of rows in table
  var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
  inp1.value = document.getElementById("Colour").value;
  var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
  inp2.value = document.getElementById("Organize").value;
  var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
  inp3.value =  document.getElementById("Company").value;
  var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
  inp4.value = document.getElementById("Subdivision").value;
  table.appendChild(new_row);
}

Когда я пытаюсь добавить новую строку в таблицу, сначала добавляется одна пустая строка.

Строка должна получить добавляется только тогда, когда пользователь нажимает кнопку «Добавить в корзину со значениями».

Также должно отображаться сообщение об ошибке, когда пользователь пытается добавить пустые строки.

Не могли бы вы мне помочь с этим?

Answer 1

Вы можете hide первую строку вашей таблицы. Затем, когда вызывается addTo(), вы можете показать эту строку, чтобы сделать ее клон, и после клонирования снова скрыть ее, иначе иначе будет создана вся row снова внутри вашего кода js.

Демо-код :

function addTo() { // to add rows and copy value to cart
  if ((document.getElementById("Colour").value === "") || (document.getElementById("Organize").value === "") || (document.getElementById("Company").value === "") || (document.getElementById("Subdivision").value === "")) {
    //display error message
    document.getElementById("message").innerHTML = "All fields required";


  } else {
    //unhiding  1st row to cloned it
    document.getElementById('show').style.display = "";
    document.getElementById("message").innerHTML = "";
    var table = document.getElementById('cart');

    var new_row = table.rows[1].cloneNode(true); // clones the first row 
    var len = table.rows.length; // number of rows in table
    var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
    inp1.value = document.getElementById("Colour").value;
    var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
    inp2.value = document.getElementById("Organize").value;
    var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
    inp3.value = document.getElementById("Company").value;
    var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
    inp4.value = document.getElementById("Subdivision").value;
    table.appendChild(new_row);
    //hide again after cloning 
    document.getElementById('show').style.display = 'none';
  }
}

p {
  color: #f44336;
}

<p id="message"></p>
<table id="form">
  <tr>
    <td>
      <select name="Colour" id="Colour" required>
        <option>blue</option>
        <option>pink</option>
        <option>orange</option>
        <option>red</option>
      </select>
    </td>
    <td>
      <select name="Organize" id="Organize" required>
        <option>preethi enterprise</option>
        <option>prasanna enterprise</option>
      </select>
    </td>
    <td> <input type="text" name="Company" id="Company" required></td>
    <td><input type="text" name="Subdivision" id="Subdivision" required></td>

  </tr>
</table>
<button onclick="addTo()">Add to Cart</button>


<table id="cart">
  <tr>
    <th><label>Colour</label></th>
    <th><label>Organize</label></th>
    <th><label>Company</label></th>
    <th><label>Subdivision</label></th>
  </tr>
  <tr id="show" style="display:none;">
    <td><input type="text" readonly></td>
    <td><input type="text" readonly></td>
    <td><input type="text" readonly></td>
    <td><input type="text" readonly></td>
    <td><input type="button" value="remove" onclick="remove(this)" /></td>
  </tr>
</table>