0

テーブルに別の行を動的に追加しようとしていますが、1行しか追加されず、もう追加されません。

html は次のとおりです。

<table class="pretty property_units" style="width:800px;">
<thead>
<tr>
<th>Bedroom</th>
<th>Bathroom</th>
<th>Square Feet</th>
<th>Price</th>
<th>Available</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="rows">
    <td><input type='text' name='bedroom[]' class='input-small'></td>
    <td><input type='text' name='bath[]' class='input-small'></td>
    <td><input type='text' name='sqrt[]' class='input-small'></td>
    <td><input type='text' name='price[]' class='input-small'></td>
    <td>
        <select name='avail[]' class='input-small'>
        <option value='yes'>Yes</option>
        <option value='no'>No</option>
        </select>
    </td>
    <td><button class='btn btn-danger btn-small'>remove</button></td>
</tr>
</tbody>
</table>

ここにjsがあります：

<script type="text/javascript">
$(document).ready(function() {
    var tblrow = $('table.property_units tr.rows:first-child').clone();
    $(".addrow").click(function() {
    $("table.property_units").append(tblrow);
    });
});
</script>

append でテーブルの行を書き出していないことに注意してください。書きたくないので、解決策として追加しないでください。コードが非常に厄介になります。

4

1 に答える 1

1

行をテーブルに追加していますが、次の行に追加する必要があります<tbody>。

$("table.property_units tbody").append(tblrow);

また、:first-child無効なセレクタです。あなたは使用するつもりでした:first：

$('table.property_units tr.rows:first').clone();

また、クローンをクリック機能に移動します。

$(".addrow").click(function() {
    var tblrow = $('table.property_units tr.rows:first').clone();
    $("table.property_units tbody").append(tblrow);
});

http://jsfiddle.net/2ygGt/4/

于 2013-08-22T09:45:47.370 に答える