1

動的フォームテーブルを作成するためにjqueryを作成しています。

行のクローンを作成し、その行のいくつかのプロパティを変更して一意にするだけです。

したがって、私の戦略は、最初にクローンを作成し、それをテーブルに追加してから、その子要素の1つを取得して変更することです。すべてが機能していますが、最後の部分です。

$(function () {
$(".appendRow").click(function() {
    var body = $(this).closest("tbody");
    var row = $(this).closest("tr");
    var newNum = $(".operation").size();
    $("#test").append("<p>newNum: " + newNum + "</p>");
    var clone = row.clone();    
    body.append(clone);
    var newRow = $(".RowNumber").get(newNum);
    var newRowNum = newNum + 1;
    $("#test").append("<p>newRowNum: " + newRowNum + "</p>");
    // $("#test").append("<p>type: " + newRow.type() + "</p>"); // tried to check type with this, error
    //newRow.html(newRowNum); // trying to change html of span element, fails with error
}); 

});

最初のコメント行は、デバッグを支援するためのものでした。それと他のコメントされた行は、GoogleChromeでエラーを引き起こしました：

ローカル例外、タイプエラー、newRowが未定義です。

以下はhtmlです：

<form id="processname" name="processname" method="post" action="" >
<table border="1" width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="right" valign="middle">Order</td>
<td align="left" valign="middle">Process</td>
<td>Operation</td>
<td>Value</td>
<td>+</td>
<td>&ndash;</td>
</tr>

<tr>
<td><span class="rowNumber">1</span></td>
<!--<td><span class="rowNumber">1</span></td>-->
<td>
<select class="process" name="category_1" id="category_1" onChange="javascript: dropdownlist(this); elementPos(this)">
<option value="">Select Category</option>

<option value="3" selected="selected">translate</option>
<option value="4">math</option>
<option value="5">format</option>
<option value="6">write</option></select></td>
<td align="left" valign="middle">
<select class="operation" name="operation_1" id="operation_1">
<option value="">Select Sub-Category</option>
<option value="s->c" selected="selected">Use source as core by default</option><option value="s->t->c">Only process translated values</option></select>
</td>
<td>
<input type="text" name="value_1" id="value_1" value="" />
</td>
    <td><input type="button" style="max-width:5em" class="appendRow" value="+" /></td>
    <td><input type="button" class="delRow" value="-" /></td>
</tr>
.
.
.

</table>
</form>

2013年5月29日のメモ：最近、GoogleChrome用のAdblockPlusアドオンが、クラス「addRow」の表示を妨げていることを発見しました（display:none広告に関連付けられた一連のクラスに使用されます）。質問と回答を編集してクラスを「appendRow」に変更し、このコードをコピーする人が今と同じ問題を起こさないようにしました。

4

1 に答える 1

2

追加する前に要素を変更できるのに、なぜ要素を追加し、DOM からその要素を取得して変更するのでしょうか。

あなたが何をしようとしているのかわかりませんが、おそらく次のようなものです。

$(function() {
    $('#processname').on('click', '.addRow', function() {
        var body = $(this).closest("tbody");
        var row = $(this).closest("tr");
        var newNum = $(".operation").length + 1;
        var clone = row.clone();
        clone.find('.rowNumber').html(newNum);
        body.append(clone);
    });
});​

フィドル

于 2012-08-19T18:24:45.417 に答える