Question

我有添加按钮和6列。当我点击添加按钮时，它会动态生成行，并同样删除。问题是我想使用2列将一个文本框的内容复制到另一个文本框中。我只能做固定列，但我怎么能为动态文本框做这个。

如果我在Amount列和keyup选项卡中写2，那么2应该在Total Column中。它应该发生在每一个动态行中。

请告诉。

Answer 1

我是使用jQuery完成的。请看一下。请检查keyup事件处理程序，它也适用于动态添加的行。希望它会对你有所帮助。

function addRow(){
  //for adding rows dynamically
  var tableElement = document.getElementById("mytable");
  var currentTrLength = tableElement.getElementsByTagName("tr").length;
  var currentTrIndex = currentTrLength-1; //id are ending with _0, _1 and so on
  
  var rowRef = tableElement.getElementsByTagName("tr")[1].cloneNode(true);
  var amountTextElement = rowRef.getElementsByClassName("Amount")[0];
  var totalTextElement = rowRef.getElementsByClassName("Total")[0];
  amountTextElement.id = "Amount_"+currentTrIndex;
  totalTextElement.id = "Amount_"+currentTrIndex;
  
  amountTextElement.value = "";
  totalTextElement.value = "";
  
  document.getElementById("mytable").appendChild(rowRef)
}

function copy(obj){
   var current = obj;
   var currentTr = current.parentElement.parentElement;
   var currentTotalElem = currentTr.getElementsByClassName("Total")[0];
   currentTotalElem.value = current.value;
}

function calculatesum(){

}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}

<button class="addRow" onclick="addRow()">Add Row</button>
<br/><br/>
 <table id="mytable" style="width:90%">
  <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    <th>Column4</th>
    <th>Amount</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>Test</td>
    <td><input name='Amount[]' class='form-control Amount' style='width:180px' type='text' onblur='calculatesum();' onkeyup='copy(this);' id='Amount_0' size='10' /></td>
    <td><input name='Total[]' style='width:180px' class='form-control Total' type='text' id='Total_0' size='10' /></td>
  </tr>
</table>
</body>
</html>

Answer 2

看看下面的代码：

<td>代码中copy()代码onblur onkeyup='calculatesum();' onblur='copy(this);' this事件var cc = 1; function addTableRow(jQtable){ var id=cc; jQtable.each(function() { var data = "<tr><td class='Arial_4C8966'><input name='Amount[]' class='form-control Amount[]' style='width:180px' type='text' onkeyup='calculatesum();' onblur='copy(this);' id='Amount_" + cc + "' size='10' /></td><td class='Arial_4C8966'><input name='Total[]' style='width:180px' class='form-control Total' type='text' id='Total_" + cc + "' size='10' /></td></tr>"; var $table = $(this); var n = $('tr:last td', this).length; var tds = data; cc++; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); } function copy(obj){ var current = obj; var currentTr = current.parentElement.parentElement; var currentTotalElem = currentTr.getElementsByClassName("Total")[0]; currentTotalElem.value = current.value; } function calculatesum(){ }已通过table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } <我已通过当前元素的引用< / p>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<div class="row clearfix"> <div class="col-md-12 column"> 
   <table class="table table-bordered table-hover" id="dynamicInput">
     <tr class="Form_Text_Label"> 
       <td align="center" >AMOUNT*</td> 
       <td align="center" >TOTAL*</td> 
     </tr> 
   </table>
   </div> 
   	<fieldset style="width:95%;"> 
      <div>
        <div class="col-sm-6">
          <input type="button" value="Add" class="frmBtns" onClick="addTableRow($('#dynamicInput'));" style="font-family:Calibri; font-size:15px; " > <br> 
          </div>
        </div>
   </fieldset>

＆＃13;

SELECT * 
FROM CARS 
WHERE ABS(price - $price) = ( SELECT MIN(ABS(price - $price)) FROM CARS )

＆＃13;

Mega Mall
Mega Malls
L & T Gate 6
L & T Gate 5
L & T Gate 2
Megas Mall
Mega Mwll

＆＃13;

复制动态生成文本框中的内容从添加按钮

2 个答案: