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

Question

<table>
<input type = "text" name ="color" id="color"> 
<input type = "text" name ="paint" id="paint">
<input type = "text" name ="build" id="build">
<input type = "text" name ="combine" id="combine">
<input type = "button" onclick="addto()"value="add to cart"/>`  

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

<table>  
<input type="text">
<input type="text">
<input type="text"> 
<input type="text">`

Это код таблицы, когда пользователь заполняет данные и нажимает на кнопка дисплея, значение которой должно храниться в этой таблице значений.

Answer 1

Сначала необходимо получить все данные из поля ввода в jquery / js, используя .val(), а затем использовать .append(..), чтобы добавить данные в таблицу в виде новой строки. Так что ваш код jquery будет выглядеть следующим образом ниже:

function addto() {
    //getting value from input box
      var color = $("#color").val();
      var paint = $("#paint").val();
      var build = $("#build").val();
      var combine = $("#combine").val();
      var appends = '<tr><td><input type="text" value=' + color + '></td><td><input type="text" value=' + paint + '></td><td><input type="text" value=' + build + '></td><td><input type="text" value=' + combine + '></td></tr>'
    //appending new row inside table
      $("#abc").append(appends);
    }

Демонстрационный код :

function addto() {
  //getting value from input box
  var color = $("#color").val();
  var paint = $("#paint").val();
  var build = $("#build").val();
  var combine = $("#combine").val();
  var appends = '<tr><td><input type="text" value=' + color + '></td><td><input type="text" value=' + paint + '></td><td><input type="text" value=' + build + '></td><td><input type="text" value=' + combine + '></td><td><button type="button" onclick="remove(this)" >Remove</button></td></tr>'
  //appending new row inside table
  $("#abc").append(appends);
}

function remove(ele){
//Removing <tr> 
ele.closest('tr').remove();
}

button{
color:black;
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Color : <input type="text" name="color" id="color"></td>
  </tr>
  <tr>
    <td>Paint : <input type="text" name="paint" id="paint"></td>
  </tr>
  <tr>
    <td> Build : <input type="text" name="build" id="build"></td>
  </tr>
  <tr>
    <td> Combine : <input type="text" name="combine" id="combine"></td>
  </tr>
  <tr>
    <td><input type="button" onclick="addto()" value="Add to cart" /></td>
  </tr>
</table>
Your Typed Data Will Display Here :



<table id="abc" border="1">
  <tr>
    <tr>
      <th>Color</th>
      <th>Paint</th>
      <th>Build</th>
      <th>Combine</th>
      <th>Remove</th>
    </tr>

</table>