Question

我正在使用以下代码在单击按钮时生成文本框。现在，我想用text2乘以text1的值，并在keyup事件中将其填充到text3中，并为每一行重复该过程。我不知道如何使用键盘输入和多行每一行的数据。请帮助。 JS代码：

$(function(){
insertRow();
$('#addrow').on('click',function(){
insertRow();
});
function insertRow() {
var index = $('#noofrows').val();
var table = document.getElementById("rep1");
var row = table.insertRow(table.rows.length);

var day1=row.insertCell(0);
    var t1=document.createElement("input");
            t1.id = "text1"+index;
            t1.name = "text1[]";
    var day2=row.insertCell(1);
        var t2=document.createElement("input");
            t2.id = "text2"+index;
            t2.name = "text2[]";
            var day3=row.insertCell(2);
        var t3=document.createElement("input");
            t3.id = "text3"+index;
            t3.name = "text3[]";
           index++;
$('#noofrows').val(index);

}
});

HTML按钮代码：

<div id="myDiv1">
<table class="table table-bordered table-hover table-responsive table-striped" id="rep1">
<input type='button' name='addrow' id='addrow' value='Add Row' class="btn btn-primary">
<tr>
<tr>
    <th rowspan="2" >Text1</th>
    <th rowspan="2" >Text2</th>
    <th rowspan="2" >Text3</th>
</tr>
        </tr>
        <tr>

        </tr>
 </table>
</div>

Answer 1

在表中没有tr和td / th的情况下，您不能放置输入或任何其他html元素。因此，请将add和index输入保留在表的外部。因为您已经在使用jquery，所以不要使用javascript创建元素，因为这将花费更多的代码和时间（jQuery的使用更简单）。使用第一列和第二列的输入来附加keyup事件，并将其乘法放在第三列下尝试下面的代码。

$(function(){
insertRow();
$('#addrow').on('click',function(){
insertRow();
});
function insertRow() {
var index = $('#noofrows').val();
var table = $("#rep1 tbody");
table.append('<tr><td><input type="text" id="text1' + index + '" name="text1"></td><td><input type="text" id="text2' + index + '" name="text2"></td><td><input type="text" id="text3' + index + '" name="text3"></td></tr>');
index++;
$('#noofrows').val(index);
}

$("#rep1").on("keyup"," input[name^=text]", function(){
   var $tr = $(this).closest('tr');
   var val1 = $tr.find('td:eq(0) input').val();
           var val2 = $tr.find('td:eq(1) input').val();
           $tr.find('td:eq(2) input').val(val1*val2);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv1">
<input type='button' name='addrow' id='addrow' value='Add Row' class="btn btn-primary">
<input id="noofrows" value="0">
<table class="table table-bordered table-hover table-responsive table-striped" id="rep1">
<thead>
<tr>
    <th rowspan="2" >Text1</th>
    <th rowspan="2" >Text2</th>
    <th rowspan="2" >Text3</th>
</tr>
</thead>
<tbody></tbody>
 </table>
</div>

在上面的代码中，我们已经在使用index并将其与每个输入ID附加在一起的情况下获得了不同的ID，您可以遵循相同的方法来创建不同的名称。使用start with attribute selector in jquery更改keyup事件句柄，并使用eq()选择器读取第一，第二和第三输入，如下所示

$("#rep1").on("keyup"," input[name^=text]", function(){
       var $tr = $(this).closest('tr');
       var val1 = $tr.find('td:eq(0) input').val();
       var val2 = $tr.find('td:eq(1) input').val();
       $tr.find('td:eq(2) input').val(val1*val2);
    });

多行键控计算（行通过单击按钮创建）

1 个答案: