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

Posted 2023-03-25

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

【英文标题】：How I get the details in cells of table from id's using Javascript function

【发布时间】：2021-12-15 05:08:01

【问题描述】：

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

<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>

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

【问题讨论】：

cell1. 变量名无效 (.) 并且您的代码中也不存在。你对这些任务的意图是什么？

这是我的任务，我正在努力完成，但目前还做不到。

你应该从修复我指出的语法错误开始。

gettingList 与 getList 有什么区别？ ...我没有看到gettingList 的函数。

【参考方案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>