个人中心
gpt4 book ai didi

javascript - 通过 javascript 传递 id 和 name

转载 作者：行者123 更新时间：2023-12-03 03:39:08 26 4
gpt4 key购买 nike

enter image description here图像上显示的输出

嗨，我在 javascript 方面没有太多专业知识，在我的代码中，我有“添加项目”和“删除项目”按钮，该按钮工作正常。第一行对于总计算功能工作正常，但其余行无法工作，因为我无法为创建的行分配不同的名称和 ID。我如何重用 JavaScript。另请让我知道如何使用 POST 方法或此代码接收提交数据，以及如何查找我在表底部插入的所有行的总数。提前致谢

<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" type="text/css" href="css/default.css"/>
        <script type="text/javascript" src="add_rows.js"></script> 
        <script>
            function func()
            {
                var w = document.getElementById("qty").value;
                var x = document.getElementById("price").value;
                var z = document.getElementById("total");
                z.value = Number(w)*Number(x);
            }
        </script>
</head>
<body>
      <fieldset class="row2">
                <legend>Catering Order Details</legend>
                <p> 
                    <input type="button" value="Add Items" onClick="addRow('dataTable')" /> 
                    <input type="button" value="Remove Items" onClick="deleteRow('dataTable')"  /> 
                </p>

            <table id="dataTable" class="form" border="1">
                  <tbody>
                    <tr>
                      <p>
                        <td><input type="checkbox" required="required" name="chk[]" /></td>
                        <td>
                            <label>Item</label>
                            <select size="1" name="Item[]" required="required" > 
                            <?php
                                echo "<option value=''>---Choose Item---</option>";
                                $q=mysqli_query($dbConnect1,"SELECT DISTINCT ITEM as Item, ITEM_ID FROM `manage_item`");
                                while($r=mysqli_fetch_assoc($q))
                                {
                                $i=$r['ITEM_ID'];
                                $n=$r['Item'];
                                echo "<option value='$i'> $n</option>";
                                }
                            ?>
                            </select>
                         </td>
                         <td>
                            <label>Quantity</label>
                            <input type="text" required="required"  name="Qty[]" id="qty" value="">
                         </td>
                         <td>
                            <label>Price/Quantity</label>
                            <input type="text" required="required"  name="Price[]" id="price" value="" onChange="func()">
                         </td>
                         <td>
                            <label>Total</label>
                            <input type="text" required="required"  name="Total[]" id="total" value="">
                         </td>
                            </p>
                    </tr>
                    </tbody>
                </table>
                <div class="clear"></div>
            </fieldset>
</div>
</body>
</html>

这是我的脚本

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 100){                     
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }else{
         alert("Maximum items is 100.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {                         
                alert("Cannot Remove all the Items.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

最佳答案

您可以将它们更改为类名，而不是使用 ID，如下所示:

<input type="text" required="required"  name="Qty[]" class="qty" value="" oninput="func(this)">

因为您使用内联事件，您可以:

  • use input event because the DOM input event is fired synchronously when the value of an <input>, <select>, or <textarea> element is changed.
  • this 作为内联函数的参数:它将是当前元素

因此，将您的func更改为:

function func(ele) {
    var parentRow = ele.parentNode.parentNode;
    var w = parentRow.querySelector('input.qty').value;
    var x = parentRow.querySelector('input.price').value;
    var z = parentRow.querySelector('input.total');
    z.value = Number(w)*Number(x);
}

this 参数现在是 ele 当前元素。您现在可以获取父行并使用类和 querySelector您可以找到所有元素。

代码片段:

function updateGrandTotal() {
    var gt = document.querySelector('input.grantotal');
    gt.value = 0;
    document.querySelectorAll('input.total').forEach(function(ele, idx) {
        gt.value = +gt.value + +ele.value;
    });
}
function func(ele) {
    var parentRow = ele.parentNode.parentNode;
    var w = parentRow.querySelector('input.qty').value;
    var x = parentRow.querySelector('input.price').value;
    var z = parentRow.querySelector('input.total');
    z.value = Number(w)*Number(x);
    updateGrandTotal();
}
function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length -1;
    if(rowCount < 100){
        var row = table.insertRow(rowCount + 1);
        var colCount = table.rows[1].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        }
    }else{
        alert("Maximum items is 100.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
                alert("Cannot Remove all the Items.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
    updateGrandTotal();
}
<fieldset class="row2">
  <legend>Catering Order Details</legend>
  <p>
      <input type="button" value="Add Items" onClick="addRow('dataTable')" />
      <input type="button" value="Remove Items" onClick="deleteRow('dataTable')"  />
  </p>

  <table id="dataTable" class="form" border="1">
      <thead>
      <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>
              <label>Grand Total</label>
              <input type="text" required="required"  name="Total[]" class="grantotal" value=""></td>
      </tr>
      </thead>
      <tbody>
      <tr>
          <p>
          <td><input type="checkbox" required="required" name="chk[]" /></td>
          <td>
              <label>Item</label>
              <select size="1" name="Item[]" required="required" >
                  <option value=''>---Choose Item---</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
              </select>
          </td>
          <td>
              <label>Quantity</label>
              <input type="text" required="required"  name="Qty[]" class="qty" value="" oninput="func(this)">
          </td>
          <td>
              <label>Price/Quantity</label>
              <input type="text" required="required"  name="Price[]" class="price" value="" oninput="func(this)">
          </td>
          <td>
              <label>Total</label>
              <input type="text" required="required"  name="Total[]" class="total" value="">
          </td>
          </p>
      </tr>
      </tbody>
  </table>
  <div class="clear"></div>
</fieldset>

关于javascript - 通过 javascript 传递 id 和 name，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45714421/

26 4 0
文章推荐： javascript - 如何从 Protractor 中的随机菜单中获取元素？
文章推荐： azure - Azure Premium V3是否支持远程调试？
文章推荐： Azure AD 应用程序注册 secret 操纵
文章推荐： javascript - 在原型(prototype)内部定义函数(如 toString 函数)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com