Question

我是JQuery的新手，使用以下代码将动态行添加到html表中

function addRow() {
  var root = document.getElementById('mytab').getElementsByTagName('tbody')[0];
  var rows = root.getElementsByTagName('tr');
  var clone = cloneEl(rows[rows.length - 1]);
  cleanUpInputs(clone);
  root.appendChild(clone);
}
function addColumn() {
  var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone;
    while (r = rows[i++]) {
      c = r.getElementsByTagName('td');
      clone = cloneEl(c[c.length - 1]);
      cleanUpInputs(clone);
      c[0].parentNode.appendChild(clone);
    }
}
function cloneEl(el) {
  var clo = el.cloneNode(true);
  return clo;
}

function cleanUpInputs(obj) {
  for (var i = 0; n = obj.childNodes[i]; ++i) {
    if (n.childNodes && n.tagName != 'INPUT') {
      cleanUpInputs(n);
    } else if (n.tagName == 'INPUT' && n.type == 'text') {
      n.value = '';
    }
  }  
}

我的html看起来像这样

<table id="mytab" class="table table-bordered payment_table">
                                    <thead class="bg-header">
                                        <tr>
                                            <th colspan="4">Bill Details</th>
                                        </tr>
                                    </thead>
                                    <tbody class="form-tbody">
                                        <tr>
                                            <th class="text-center">Quantity</th>
                                            <th class="text-center">Rate/Item</th>
                                            <th class="text-center">Total</th>  
                                            <th class="text-center">Description</th>                                            
                                        </tr>
                                        <tr>
                                            <td><input type="text" id="quantity" name="quantity" class="form-control"></td>
                                            <td><input type="text" id="rate" name="rate" class="form-control"></td>
                                            <td><input type="text" id="total" name="total" class="form-control"></td>
                                            <td><input type="text" id="desc" name="desc" class="form-control"></td>
                                        </tr>
                                    </tbody>
                                    <td><input type="button" class="btn btn-primary" value="Add" onclick="addRow()"></td>
                                </table>

我正在使用jquery在代码行之后进行数量*费率/项目=总计

$(document).ready(function(){
        $(document).on('keyup','#rate',function(){
            var rate = $("#rate").val();
            var quantity = $("#quantity").val();
            var total = rate*quantity;
            $('#total').val(total);
        });
    });

它对于第一行工作正常，但不适用于添加的行。我已经用ID尝试了“ +”，但仍然没有用。动态添加名称时也会创建带有名称的输入字段。如何处理此字段以在服务器端保存数据。需要帮助！！！

Answer 1

id元素必须唯一，当您克隆tr时，您正在复制其内部结构，因此有必要使id的定义更具动态性。

一种解决方案是将id值与变量连接起来，并在克隆tr时增加该变量的值。

类似这样的内容：每个“克隆操作”中的$("#quantity" + var++)。

我希望这会有所帮助。

动态添加行后jQuery无法正常工作

1 个答案: