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|| ________ | 
+---+------+------+----------+ 

Это самое странное для меня. Этот код не в цикле или что-то еще - поэтому он должен просто получить одну строку! Соответствующий код в моем Fiddle here, а также ниже (сниппеты для целей вопроса) ...

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 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> 

Демо-версия here.

Объяснение

IIRC современные браузеры убедитесь, что tr элементы обернут tbody в йот. Таким образом, вы получите 2 элемента, соответствующих селектору элемента (ов), на котором будет применяться добавление.

Answer 2

Вам нужно либо слейте cotainer первый или использовать .html

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

ИЛИ

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