javascript - 捕获 AJAX 发送的克隆行值

Question

我目前有一个简单的表格，有 4 列和 1 行。用户可以填写 4 列的数据并提交我的 javascript 函数根据 id 查找值。简单的。用户还可以选择添加另一行并输入更多数据。当行被克隆时，它会保留父行的 ID。

我遇到麻烦的是如何捕获克隆行的值。

我目前正在使用它来捕获输入元素之一的值:

var fineexpense= document.getElementById('fineexpense').value;

当我有多行时，它只获取第一个值。

将具有该 ID 的所有值转换为数组然后通过 AJAX 发送它的最佳方法是什么？

我真的很困惑如何用 Javascript 来做到这一点。任何帮助都会很棒!谢谢。

这是我的克隆函数:(需要编辑以更改 ID)

function add() {

  var row = document.getElementById("finerow"); // find row to copy
  var table = document.getElementById("adddate"); // find table to append to
  var clone = row.cloneNode(true); // copy children too
 // clone.id = "newID"; // change id or other attributes/contents
  table.appendChild(clone); // add new row to end of table
}

这是我的 HTML 示例:

<table  class="tablesorter2"> 
    <tbody> 
        <tr id='finerow'> 
            <td>Expense:
            </td>

            <td>
              <select id="fineexpense" name='fineexpense'>
              <option value='Mortage/Rent'>Mortage/Rent
              </option>
              <option value='Auto'>Auto
              </option>

Answer 1

ID 应该是唯一的。如果您有多个相同的元素(克隆元素)，那么使用类定义更适合于此。

When I have multiple rows, it only grabs the first value.

是的，发生这种情况是因为 ID 仅捕获找到的第一个元素。在这里我为您提供解决方案，假设您有多个元素，如下所示:

<input type="text" name="myName" class="sameElement" value="a">
<input type="text" name="myName" class="sameElement" value="b">
<input type="text" name="myName" class="sameElement" value="c">

因此，我们不使用 id，而是使用 class。然后你可以使用.each捕获这些元素的所有值并将其存储在数组变量中，如下所示:

var allValue = [];

$('.sameElement').each(function(){
    allValue.push( $(this).val() ); //output <-- ['a','b','c']
});

或者您可以使用 javascript 对象，因为它们有 key 和对以便于理解。这只是如何使用多个元素的示例。

好吧，如果你想通过 ajax 发送这个值，这里是一个简单的例子:

 $.ajax({
    type : 'POST',
    url  : 'url_for_processing',
    data : {
      myVar : allValue //<-- we passed an array value
    },
    success : function(data) {
      // do whatever you want
    }
 });