0

jQuery を使用してテーブル行を動的に追加しようとしています。すべて正常に動作しますが、行は最後の < tr> に追加されません。代わりに、< table> の上に追加されます...

私はかなり混乱しています。誰か助けてくれませんか？ここにコードがあります

Javascript

var counterx = 2;
var counter = 2;

$(document).ready(function(){
    $("#addMoreRcpt").click(function(){
        if (counterx>10){
            alert("Only 10 reciepients are allowed");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'RcptEml_' + counter);
        newTextBoxDiv.append("<tr><td>New Data</td><td>New Data</td><td>New Data</td></tr>");

        newTextBoxDiv.appendTo("#RcptGroup");
        counter++;
        counterx++;
    });
});

function fncDelRcpt(id){
    $("#RcptEml_"+id).remove();
    counterx--;
}

HTML

<table border=1>
<div id="RcptGroup">
<tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
</tr>
<div id="1">
<tr>
    <td>data</td>
    <td>Data</td>
    <td>data</td>
</tr>
</div>
</div>

</table>
<br /><a id="addMoreRcpt" href="#" >Add more reciepients</a>
4

1 に答える 1

1

動作するはずのコードの変更部分は次のとおりです。

スクリプト：

$(document).ready(function() {
    $("#addMoreRcpt").click(function() {
        if (counterx > 10) {
            alert("Only 10 reciepients are allowed");
            return false;
        }
        var newTextBoxRow = $(document.createElement('tr')).attr("id", 'RcptEml_' + counter);
        newTextBoxRow.append("<td>New Data</td><td>New Data</td><td>New Data</td>");
        newTextBoxRow.appendTo("#RcptGroup");
        counter++;
        counterx++;
    });
});​

テーブル：

<table border="1" id="RcptGroup">
    <tr id="0">
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr id="RcptEml_1">
        <td>data</td>
        <td>Data</td>
        <td>data</td>
    </tr>
</table>​​​​​​​​​​​​

作業フィドル: http://jsfiddle.net/pratik136/2au73/5/

質問へのコメントで示唆されているように、<Div/>s は s 内にネストできません<Table/>。のガイドラインはHTML 4.01次のとおりですが、ほとんどすべてが当てはまるはずです: http://www.cs.tut.fi/~jkorpela/html/nesting.html

于 2012-08-12T23:18:25.807 に答える