Question

当我单击表格行时，该行值将显示以下文本框，然后单击 + 按钮复制第一行值并正确插入新行和位置值。

当我点击编辑按钮＃时，该值再次放到第一行。如何找到该行索引。如何获取特定ID？

<script>
function insRow()
      {
          var x=document.getElementById('scrolltable');
          var new_row = x.rows[1].cloneNode(true);


          var len = x.rows.length;

          var code=document.getElementById('code').value;
          var product=document.getElementById('product_name').value;
          var qty=document.getElementById('quantity').value;
          var rate=document.getElementById('amount').value;
          var amount=document.getElementById('total').value;

          var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
          inp1.id += len;
          inp1.value = code;
          var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
          inp2.id += len;
          inp2.value = product;
          var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
          inp3.id += len;
          inp3.value = qty;
          var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
          inp4.id += len;
          inp4.value = rate;
          var inp5 = new_row.cells[4].getElementsByTagName('input')[0];
          inp5.id += len;
          inp5.value = amount;


          var button = new_row.cells[5].getElementsByTagName('input')[0];
          button.value = "#";
          button.onclick = function(it) {editRow(it)};

          //cell4.appendChild(inp4);

          x.appendChild( new_row );
          document.getElementById('code').value='';
          document.getElementById('product_name').value='';
          document.getElementById('quantity').value='';
          document.getElementById('amount').value='';
          document.getElementById('total').value='';
          document.getElementById('code').focus();
      }  
function deleteRow(row)
      {


          r=row.parentNode.parentNode;
        r.parentNode.removeChild(r);
      }

        function editRow(evt) {
            var x=document.getElementById('scrolltable');
            //var l1 = evt.target.parentNode.parentNode;
            //alert(l1);

            var errorList = "";
            var l=x.rows.length;
            //var l=x.rowsIndex;
            var y=l-1;
            alert(l);
            //alert("code"+y);
            var code=document.getElementById('code'+y).value;
          var product=document.getElementById('product_name'+y).value;
          var qty=document.getElementById('quantity'+y).value;
          var rate=document.getElementById('amount'+y).value;
          var amount=document.getElementById('total'+y).value;


                document.getElementById('code').value=code;
                      document.getElementById('product_name').value=product;
                document.getElementById('quantity').value=qty;
                document.getElementById('amount').value=rate;
                document.getElementById('total').value=amount;


            var i = evt.target.parentNode.parentNode.rowIndex;
            document.getElementById('scrolltable').deleteRow(i);
            }
    </script>

我的HTML代码是：

<table class="table table-striped table-bordered dTableR" id="scrolltable">
<thead>
<tr>
<th width="10%">Code</th>
<th width="40%">Product</th>
<th width="10%">Total Qty</th>
<th width="10%">Rate</th>
<th width="12%">Amount</th>
<th width="10%">Action</th>
</tr>
    </thead>
<tbody>
<tr>
<td><input type="text" name="code"  class="span10" id="code" /></td>
<td><input type="text" name="product_name"   class="span12" id="product_name" /></td>
<td><input type="text" name="quantity" class="span10" onBlur="calculate(this.value)" id="quantity" maxlength="8"/></td>
<td><input type="text" name="amount_name" class="span10" id="amount" /></td> 
<td><input type="text" name="total_name" class="span10" id="total" maxlength="8" /></td>
 <td><input type="button" id="addmorePOIbutton" style="width:25px;" value="+" onClick="insRow()"/>
<input type="button" id="delPOIbutton" style="width:25px;" value="-" onClick="deleteRow(this)"/></td> 
</tr>                                    
</tbody>

Answer 1

因为你正在使用jquery（因为你用jquery标记了这个问题），你可以使用index（）函数形式jquery（http://api.jquery.com/index/）。

这是一个更新的（http://jsfiddle.net/6yXMF/）jsfiddle。这会警告从中点击输入按钮的tr的索引。

目前，代码中的插入和删除或行存在一些问题。解决问题后，您可以使用索引函数进行演示 insRow()功能。

如果您有任何疑问，请与我们联系。

Answer 2

您可以使用jQuery编辑功能：

首先改变

button.onclick = function(it) {editRow(it)};

到

button.onclick = function() {editRow(this)};

并更改以下功能

 function editRow(evt) 
   {

      var $tr = $(evt).parents('tr'); // get parent tr

      // put all values in top row
      $('#code').val($tr.find('input[id^=code]').val());
      $('#product_name').val($tr.find('input[id^=product_name]').val());
      $('#quantity').val($tr.find('input[id^=quantity]').val());
      $('#amount').val($tr.find('input[id^=amount]').val());
      $('#total').val($tr.find('input[id^=total]').val());

       // remove clicked tr
       $tr.remove();
   }

Working jsfiddle

注意：请将jQuery js文件添加到您的html页面。

如何在Javascript中编辑和删除行？

2 个答案: