Question

嘿StackOverflow人，我正在使用表格。

以下是我的表单的简化版本：

<script>
$('#addrowbutton').click(function() {
$('tr:hidden:first').show();
});
</script>

<html>
<button id="addrowbutton">Add Row</button>

<form>
<table>
<tbody>

<tr>
<th>Select</th>
</tr>

<tr id="tr1" class="tr">
<td>
<input type="radio" name="color1" class="colorinput" value="red">Red 
<input type="radio" name="color1" class="colorinput" value="blue" checked>Blue
</td>
</tr>

<tr id="tr2" class="tr" style="display:none">
<td>
<input type="radio" name="color2"  class="colorinput" value="red">Red 
<input type="radio" name="color2" class="colorinput" value="blue"checked>Blue
</td>
</tr>

<tr  id="tr3" class="tr" style="display:none">
<td>
<input type="radio" name="color3"  class="colorinput" value="red">Red 
<input type="radio" name="color3" class="colorinput" value="blue" checked>Blue
</td>
</tr>

<tr  id="tr4" class="tr" style="display:none">
<td>
<input type="radio" name="color4"  class="colorinput" value="red">Red 
<input type="radio" name="color4" class="colorinput" value="blue" checked>Blue
</td>
</tr>

</tbody>
</table>
</form>
</html>

当＆＃34; #addrowbutton＆＃34;单击，出现第一个隐藏的行。然后，我希望新出现的行的无线电输入具有与前一行相同的值＆＃34; .colorinput＆＃34;。

现在我已经尝试过，在结束之前}）; ：

$('tr:visible:last .colorinput').val($(.prev('tr .colorinput')).val());

编辑：请不要克隆/附加解决方案。

Answer 1

不是预先创建多个行隐藏然后复制值...如果你只有一行并且每次附加到表时克隆最后一行会更好。

首先，您需要清理并修复标记。您无法使用<button>结束</div>！您无法直接在th内拥有table！请仔细阅读并理解基本HTML。

完成上述操作后，您现在要做的就是克隆最后一行并将其附加到tbody。您还必须注意name属性。目前你所有的收音机都有相同的名字！这意味着在整个表格中的任何给定时间只会检查一个无线电。您可能希望在每行中为name s设置不同的input。

一旦你完全理解了这一点，编码变得容易。

相关的jQuery代码：

$("#btn").on("click", function() {
    var $rows = $("#tab tbody").find("tr");             // find all tr
    var ctr = $rows.length + 1;                         // next counter will +1 of tr count
    var $newrow = $rows.last().clone();                 // clone the last tr
    $newrow.find("input").attr("name", "color" + ctr);  // change the name of inputs using ctr
    $("#tab").find("tbody").append($newrow);            // append the cloned tr
});

演示小提琴：http://jsfiddle.net/abhitalks/vc9ud1c7/

在新行的输入中复制上一行的输入值？

1 个答案: