JQuery / Javascript將HTML表數據追加到TBODY，雙輸出

Question

大家早上好。 我遇到了一個問題，那就是我無法完成項目進度。 所以，我想我會請各位老兄幫忙！

情況是這樣的：我必須為用戶提供一個動態增長的表，使他們能夠輸入1-N條記錄以獲取回報。 因此，他們加載頁面，單擊按鈕，然后出現新行。 我很高興地說我的代碼有效，但有一個主要缺陷-表行重復！！ 因此，如果用戶兩次單擊“添加”按鈕，則希望他們看到：

+---+------+------+----------+
| # | Year | week | Quantity |
+---+------+------+----------+
| 1 |   |v||   |v|| ________ |
+---+------+------+----------+
| 2 |   |v||   |v|| ________ |
+---+------+------+----------+

相反，他們看到了以下內容：

+---+------+------+----------+
| # | Year | week | Quantity |
+---+------+------+----------+
| 1 |   |v||   |v|| ________ |
+---+------+------+----------+
| 2 |   |v||   |v|| ________ |
+---+------+------+----------+
| 1 |   |v||   |v|| ________ |
+---+------+------+----------+
| 2 |   |v||   |v|| ________ |
+---+------+------+----------+

對我來說這是最奇怪的事情。 該代碼不是循環的，也不是任何東西-因此它應該只排一行！ 我的小提琴中的相關代碼，以及下面（出於問題目的的摘錄）...

的HTML

<fieldset class="fieldset2">
    <legend>Return Specific Curriculum Information</legend>
    <input type="hidden" id="ccnt" value="0">
    <table class="table" id="retc">
       <tr>
           <th class="th">Entry #</th>
           <th class="th">Year</th>
           <th class="th">Week/Packet</th>
           <th class="th">Quantity</th>
       </tr>
       <tbody>

       </tbody>
    </table>
    <input type="button" value="Add Curriculum To Return" class="button" id="addcurric">
    <input type="button" value="Remove All Entries" class="button" id="remcurric">
</fieldset>

jQuery / JavaScript

$('#ccnt').data('count', 0);
$('#addcurric').click(function () {
    function getcount() {
        var $this = $('#ccnt'),
        count = $this.data('count') + 1;

        $this.data('count', count);
        return count;
    }

    var mycount = getcount();
    //console.log('mycount: ' + mycount);

    var tdclass;
    if (mycount % 2 == 1) {
        tdclass = "td1";
    } else {
        tdclass = "td2";
    }
    //console.log('tdclass: ' + tdclass);
    //window.alert(mycount + ' ' + tdclass);

    var chtml = "";
    chtml += "'<tr>";
    chtml += "    <td class=\"" + tdclass + "\">" + mycount + "</td>\\n";
    chtml += "    <td class=\"" + tdclass + "\"><select name=\"HYear" + mycount + "\" id=\"hyear" + mycount + "\">\\n";
    chtml += "        <option value=\"0\">-- Select --</option>\\n";
    chtml += "        <option value=\"1\">Year 1</option>\\n";
    chtml += "        <option value=\"2\">Year 2</option>\\n";
    chtml += "        <option value=\"3\">Year 3</option>\\n";
    chtml += "    </select></td>\\n";
    chtml += "    <td class=\"" + tdclass + "\"><select name=\"Week" + mycount + "\" id=\"week" + mycount + "\">\\n";
    chtml += "        <option value=\"0\">-- Select --</option>\\n";
    chtml += "        <option value=\"1\">Week 1</option>\\n";
    chtml += "        <option value=\"2\">Week 2</option>\\n";
    chtml += "        <option value=\"3\">Week 3</option>\\n";
    chtml += "    </select></td>\\n";
    chtml += "    <td class=\"" + tdclass + "\"><input type=\"text\"  name=\"qty" + mycount + "\" class=\"input\"></td>\\n";
    chtml += " </tr>\\n'";

    //console.log('chtml is: ' + chtml);
    //window.alert(chtml);
    //console.log("Writing an iteration of chtml to scrren...");
    $('#retc > tbody').append(chtml);
});

有人可以幫助我了解每次/為什么每次單擊按鈕都會得到重復的行條目嗎？

提前致謝！！

Answer 1

您的html片段缺少thead元素。 table元素的以下結構使其可以工作。

<table class="table" id="retc">
    <thead>
        <tr>
            <th class="th">Entry #</th>
            <th class="th">HIPPY Year</th>
            <th class="th">Week/Packet</th>
            <th class="th">Quantity</th>
        </tr>
    </thead>
   <tbody>

   </tbody>
</table>

現場演示這里 。

說明

iirc現代瀏覽器確保tr元素在dom中用tbody包裹。 這樣，您最終得到2個與要應用附加元素的元素的選擇器匹配的元素。

Answer 2

您需要先清空容器或使用.html

$('#retc > tbody').empty().append(chtml);

要么

$('#retc > tbody').html(chtml);