Клонировать всплывающие окна всех последних столбцов javascript при нажатии кнопки

Question

Я пытаюсь клонировать n-ый столбец таблицы html, где, поскольку мой код преобразует только последний последний столбец Dropdown при нажатии, мне нужно, чтобы все выпадающие номера последнего столбца дублировались

JS Fiddle Demo

Пример Present Статус:

Day1 Dropdown 1 

1  dd 

2  dd 

3  dd  dd 

on click 

Ожидаемый из Помещенный

Day1 Dropdown 1  Dropdown 2 

1  dd    dd 

2  dd    dd 

3  dd    dd 

HTML:

<table id='tableID'> 
    <tbody> 
     <tr> 
     <th>day</th> 
     <th> 
      Dropdown1 
     </th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td> 
      <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;"> 
       <option value="Select Subject">Select Subject</option> 
       <option value="Holiday">Holiday</option> 
       <option value="Lunch">Lunch</option> 
       <option selected="selected" value="ECO-17">ECO-17</option> 
       <option value="ECO-19">ECO-19</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td> 
      <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;"> 
       <option value="Select Subject">Select Subject</option> 
       <option value="Holiday">Holiday</option> 
       <option value="Lunch">Lunch</option> 
       <option selected="selected" value="ECO-17">ECO-17</option> 
       <option value="ECO-19">ECO-19</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td> 
      <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;"> 
       <option value="Select Subject">Select Subject</option> 
       <option value="Holiday">Holiday</option> 
       <option value="Lunch">Lunch</option> 
       <option selected="selected" value="ECO-17">ECO-17</option> 
       <option value="ECO-19">ECO-19</option> 
      </select> 
     </td> 
    </tr> 
    </tbody> 
</table> 

<input type="button" id="clone" value="Add New Row"></button> 

JS:

$("#clone").on("click",function(){ 

var $tableBody = $('#tableID').find("tbody"), 
     $trLast = $tableBody.find("td:last"), 
     $trNew = $trLast.clone(); 

    $trLast.after($trNew); 
}); 

Answer 1

Кроме того, необходимо клонировать й и добавить значение. Эта работа будет сейчас ->http://jsfiddle.net/kQpfE/248/

$("#clone").on("click", function() { 
      var newHeader = $('#tableID thead tr').append('<th></th>'); 
      $('#tableID').find('th:last()').append('Dropdown' + ($('#tableID thead tr th').length - 1)); 
      $.each($('#tableID tbody').find('tr'), function (i, v) { 
       $(v).append($(v).find('td:last()').clone()); 
     }); 
    }); 

Edit: Забыл упомянуть ваше использование одного и того же ID несколько раз, а также ваши TH, находясь в TBODY, возможно, очистить ваш HTML первым.

Edit2: После сеанса с экранами адаптирован код для добавления th и increment.

Answer 2

Изменить HTML для этого, потому что ты не использовал THEAD:

<table id='tableID'> 
    <thead> 
     <tr> 
     <th>day</th> 
     <th> 
      Dropdown1 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td> 
      <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;"> 
       <option value="Select Subject">Select Subject</option> 
       <option value="Holiday">Holiday</option> 
       <option value="Lunch">Lunch</option> 
       <option selected="selected" value="ECO-17">ECO-17</option> 
       <option value="ECO-19">ECO-19</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td> 
      <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;"> 
       <option value="Select Subject">Select Subject</option> 
       <option value="Holiday">Holiday</option> 
       <option value="Lunch">Lunch</option> 
       <option selected="selected" value="ECO-17">ECO-17</option> 
       <option value="ECO-19">ECO-19</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td> 
      <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;"> 
       <option value="Select Subject">Select Subject</option> 
       <option value="Holiday">Holiday</option> 
       <option value="Lunch">Lunch</option> 
       <option selected="selected" value="ECO-17">ECO-17</option> 
       <option value="ECO-19">ECO-19</option> 
      </select> 
     </td> 
    </tr> 
    </tbody> 
</table> 

<input type="button" id="clone" value="Add New Row"></button> 

И сценарий для этого:

$("#clone").on("click",function(){ 

var $tableBody = $('#tableID').find("tbody"), 
     $tableHead = $('#tableID').find("thead"), 
     $trLast = $tableBody.find("td:last"); 

    $tableHead.find("tr").each(function(){ $(this).append($("<th>Dropdown "+ $tableHead.find("th").size() - 1 +"</th>")); }); 
    $tableBody.find("tr").each(function(){ $(this).append($trLast.clone()); }); 
});