如何从动态表中获取元素 ID 的值答案

【问题标题】：How to get value of Element ID from dynamic table如何从动态表中获取元素 ID 的值
【发布时间】：2021-05-20 15:29:13
【问题描述】：

我的问题是如何使用 [$i] 从动态输入文本中获取元素 id 值 <input type='text' class='form-control num-only 'id='price[$i]' />

完整代码：

<html>
   <body>
      <p id="demo">Create Invoice</p>
      <table class="table table-bordered table-responsive" id="crud_table">
         <tr>
            <th class="" >#</th>
            <th class="" >Product</th>
            <th class="" >Item Price</th>
            <th class="" >Quantity</th>
            <th class="" >inStore</th>
            <th class="" >New Quantity</th>
            <th class="" >Total</th>
         </tr>
         <tbody>
            <?php for ($i = 1; $i <= 2; $i++) { 
           echo" 
            <tr>
               <td align='center'><?php echo $i;?></td>
               <td><input type='text' class='form-control ' value=''   id='itemname[$i]' /></td>
               <td><input type='text' class='form-control num-only '     id='price[$i]' /></td>
               <td><input type='number' class='form-control num-only'  maxlength='5' id='quantity[$i]' onchange='kofta(this)'/></td>
               <td><input type='text' class='form-control num-only'   maxlength='50' id='inStore[$i]'  onchange='kofta()'/></td>
               <td><input type='text' class='form-control num-only'   maxlength='10' id='newq[$i] ' onchange='kofta()'/></td>
               <td><input type='text' class='form-control num-only'   maxlength='50' id='total[$i]' readonly /></td>
            </tr> ";
             } ?>
         </tbody>
      </table>
      <input type="text" id="total" readonly value="0">
       
      <script>
         function kofta(){
         var rate= document.getElementById("price").value;
         var q1=document.getElementById("quantity").value
         var total= rate * q1;
         document.getElementById("total").value=total;
         }
         
      </script>

我怎样才能获得价值？所以我可以计算值总计 = 价格 * 数量总输入文本中所有行的总和

【问题讨论】：

标签： javascript

【解决方案1】：

为什么不改用data-attribute？

喜欢：

let totalinput = document.getElementById("total");
function kofta() {
  var rate = document.getElementById("price").value;
  var q1 = document.getElementById("quantity").value
  var total = rate * q1;
  totalinput.value = total;
}
let inputs = document.querySelectorAll('input[data-number]');
inputs.forEach(input => {
  input.addEventListener('change', SumAll);
});

function SumAll() {
  let counter = 0;
  inputs.forEach(input => {
    counter+=+input.value; 
  });
  totalinput.value = counter;
}

<html>

<body>
  <p id="demo">Create Invoice</p>
  <table class="table table-bordered table-responsive" id="crud_table">
    <tr>
      <th class="">#</th>
      <th class="">Product</th>
      <th class="">Item Price</th>
      <th class="">Quantity</th>
      <th class="">inStore</th>
      <th class="">New Quantity</th>
      <th class="">Total</th>
    </tr>
    <tbody>
      <tr>
        <td align='center'>1</td>
        <td><input type='text' class='form-control ' value='' id='itemname1' /></td>
        <td><input type='text' class='form-control num-only ' id='price1' data-number /></td>
        <td><input type='number' class='form-control num-only' maxlength='5' id='quantity1' onchange='kofta(this)' /></td>
        <td><input type='text' class='form-control num-only' maxlength='50' id='inStore1' onchange='kofta()' /></td>
        <td><input type='text' class='form-control num-only' maxlength='10' id='newq1' onchange='kofta()' /></td>
        <td><input type='text' class='form-control num-only' maxlength='50' id='total1' readonly /></td>
      </tr>
      <tr>
        <td align='center'>2</td>
        <td><input type='text' class='form-control ' value='' id='itemname2' /></td>
        <td><input type='text' class='form-control num-only ' id='price2' data-number /></td>
        <td><input type='number' class='form-control num-only' maxlength='5' id='quantity2' onchange='kofta(this)' /></td>
        <td><input type='text' class='form-control num-only' maxlength='50' id='inStore2' onchange='kofta()' /></td>
        <td><input type='text' class='form-control num-only' maxlength='10' id='newq2 ' onchange='kofta()' /></td>
        <td><input type='text' class='form-control num-only' maxlength='50' id='total2' readonly /></td>
      </tr>
    </tbody>
  </table>
  <input type="text" id="total" readonly value="0">

每次更改输入价格时，总价都会更新。

我做了什么？

在输入价格中添加data-number
对所有输入价格使用addEventListener（使用data-number）
创建一个函数，对输入中的所有值求和。
更新总值

【讨论】：

【解决方案2】：

我不完全确定你的意思，也许这会有所帮助？

var prices = document.querySelectorAll('[id^="price"]');

这将获取 id 以“price”开头的所有元素。

【讨论】：

【解决方案3】：

我的假设是 php 将 $1 的内容附加到你放在它后面的文本中。因此，如果$1 包含 1，如循环所示，则输入的 id 将为price1。要获取该字段的值，您需要使用 document.getElementById("price1").value。

如果您想获取所有已创建字段的值，您需要遍历 ID 为 priceX 的所有输入，其中 X 是数字。如果您在浏览器中打开该页面并检查元素，则可以检查 ID 附加了哪些数字。

编辑1：

您可以尝试使用previousSibling 属性。

function kofta(quantityField) {
    let rate = quantityField.previousSibling.value,
        quantity = quantityField.value;
}

【讨论】：

是的，我想从当前选定的行中动态获取元素
你的意思是当有人改变数量时？或者选择是如何工作的？
是的，当有人更改当前行中的数量时
我编辑了答案，你可以试试吗？