如何使用 Javascript 函数从 id 获取表格单元格中的详细信息

Question

我有一个这样的下拉列表：

<select id="itemsList" onchange="gettingList()">
    <option>Please select the option</option>
    <option value="50">Soap</option>
    <option value="100">Sugar</option>
    <option value="290">Oil</option>
</select>
<br><br>

我从上面的列表中得到了产品的价格。之后，点击按钮我无法得到结果。

<input type="number" id="price" disabled="">
<br><br>

<input type="number" id="quantity" onChange="calculate()">
<br><br>

<input type="number" id="result">


<button type="button" onclick="addDetails()">Add</button>

表格代码

<table id="myTable" border="1">
  <tr>
    <th>Product Name</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Amount</th>
  </tr>
</table>
<br>

为此，我正在使用这个脚本。但是我没有得到实际的结果。

<script>
    

    
var getPrice = document.getElementById('itemsList');

function getList () {
    document.getElementById('price').value = getPrice.value;
}


function calculate () {
    var prc = document.getElementById('price').value;
    var qty = document.getElementById('quantity').value;
    var result = prc * qty;
    document.getElementById('bill').value = result;
}



function addDetails () {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1. = document.getElementById('itemsList').value;
    cell2. = document.getElementById('price').value;
    cell3. = document.getElementById('quantity').value;
    cell4. = document.getElementById('bill').value;
}

</script>

如何获取表格单元格中的详细信息？喜欢：

Answer 1

[我的]正确的做法：

const 
  myForm  = document.querySelector('#my-form')
, myTable = document.querySelector('#my-table tbody')
  ;
myForm.oninput = e =>
  {
  if (myForm.product.value!=='0')
    {
    myForm.price.value = myForm.product.value
    myForm.bill.value  = myForm.price.valueAsNumber * myForm.quantity.valueAsNumber 
    }
  else
    {
    myForm.price.value = ''
    myForm.bill.value  = ''
    }
  }
myForm.onsubmit = e =>
  {
  e.preventDefault() // disable submit

  if (myForm.product.value!=='0')
    {
    let row = myTable.insertRow()
    row.insertCell().textContent =  myForm.product.selectedOptions[0].textContent 
    row.insertCell().textContent =  myForm.price.value 
    row.insertCell().textContent =  myForm.quantity.value
    row.insertCell().textContent =  myForm.bill.value

    myForm.product.value  = '0'
    myForm.price.value    = ''
    myForm.quantity.value = '1'
    myForm.bill.value     = ''
    }
  }

* {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 14px;
}
label {
  display : block;
  margin  : .5em 0;
}
label span {
  font-size : .9em;
  display   : block;
}
input {
  padding-left: .7em;
}
table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
thead { 
  background-color : lightsteelblue;
  font-weight      : bold;
  }
th, td {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }
td {
  text-align: right;
  }
td:nth-of-type(1){
  text-align: left;
  }
td:nth-of-type(2)::after,
td:nth-of-type(4)::after {
  content : ' \20a8';
  }

<form id="my-form">
  <label>
    <span>Product :</span>
    <select id="product">
      <option value="0" selected disabled>Please select the option</option>
      <option value="50" > Soap  </option>
      <option value="100"> Sugar </option>
      <option value="290"> Oil   </option>
    </select>
  </label>
  <label>
    <span>Price :</span>
    <input type="number" name="price" disabled>
  </label>
  <label>
    <span>Quantity</span>
    <input type="number" name="quantity" value="1" min="1">
  </label>
  <label>
    <span>Amount</span>
    <input type="number" name="bill" disabled>
  </label>
 
  <button type="submit">Add</button>
</form>

<table id="my-table">
  <thead>
    <tr> <th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> </tr>
  </thead>
  <tbody></tbody>
</table>