следующий ряд добавлен в одну ячейку

Question

У меня есть следующий код. Здесь я хочу получить новые строки в таблице при нажатии Кнопка добавления это работает, но в чем моя проблема: я могу получить все текстовые поля в одну ячейку.

может кто-то сказать мне, какую ошибку я здесь сделал ?

HTML:

<h3> Adding Next Rows </h3> 

<div class="common" style="width:1040px; -overflow-x:scroll; padding: 5px 5px 0 5px;"> 
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" 
border="#729111 1px solid"> 
    <tr> 
     <th align="center">Roll No</th> 
     <th align="center">First Name</th> 
     <th align="center">Last Name</th> 
    </tr> 
    <?php $t_row=3; for($i=1;$i<=$t_row;$i++) { ?> 
    <tr id="rows"> 
     <div style="padding-left: 5px"> 
      <td style="padding:5px;"> 
       <input type="text" name="rollno<? $i ?>" /> 
      </td> 
      <td style="padding:5px;"> 
       <input type="text" name="firstname<? $i ?>" /> 
      </td> 
      <td style="padding:5px;"> 
       <input type="text" name="lastname<? $i ?>" /> 
      </td> 
     </div> 
    </tr> 
    <? } ?> 
    <div id="addgroup"> 
     <div id="add_div1"></div> 
     <table>&nbsp; 
      <br /> 
      <input type="button" name="add" value="+Add" id="addrows" style="color:#3300FF; font-size:16px; " 
      /> 
      <input type="hidden" id="hiddenprice" name="hiddenprice" value="3" /> 
     </table> 
    </div> 

JQuery:

var $ = jQuery.noConflict(); 
$("#addrows").click(function() { 
if (document.getElementById("hiddenprice").value == "") { 
    imagecounter = 4; 
} else { 
    imagecounter = parseFloat(document.getElementById("hiddenprice").value) + 1; 
} 

//imagecounter=4;  
var newImageDiv = $(document.createElement('div')) 
    .attr("id", 'add_div' + imagecounter); 

/*onchange="return fn_productname(this.value,\'prdname'+imagecounter+'\')"*/ 

newImageDiv.after().html('<table width="100%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="0">' + '<tr>' + '<td style="padding:5px;" >' + '<input type="text" name="rollno<? $i ?>" />' + '</td>' + '<td style="padding:5px;">' + '<input type="text" name="firstname<? $i ?>" />' + '</td>' + '<td style="padding:5px;">' + '<input type="text" name="lastname<? $i ?>" />' + '</td>' + '</tr>' + '</table>'); 

newImageDiv.appendTo("#maintable"); 

document.getElementById("hiddenprice").value = imagecounter; 
imagecounter++; 

});

вот мой jsfiddle страница ,.

Answer 1

Вот fiddle

Где я только что сделал минимальные изменения в код, так что вы можете увидеть, что разные:

В основном

<div id="addgroup"> был слишком рано на странице (перемещался ниже <table id="maintable") , а также был закрыт странный путь, содержащий закрывающий тег <table>.

так что часть теперь выглядит следующим образом:

</table> 
<div id="addgroup"> 
</div> 
    &nbsp; 
<br /> 

, чтобы сделать его выглядеть ваш первый ряд, я также добавил настройки стиля от вашего maintable к другим таблицам вы добавляете.

newImageDiv.after().html('<table cellpadding="0" width="50%" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid">'+ 
         '<tr>'+ 
         '<td style="padding:5px;" >'+'<input type="text" name="rollno<? $i ?>" />' + '</td>' + '<td style="padding:5px;">'+ '<input type="text" name="firstname<? $i ?>" />'+'</td>'+'<td style="padding:5px;">'+'<input type="text" name="lastname<? $i ?>" />'+'</td>'+'</tr>'+'</table>'); 

(Имейте в виду, хотя, добавив целые таблицы, большую часть времени не очень хорошо, лучше иметь только 1 таблицу и добавить строки к нему ...)

Answer 2

Вот демо

JSFIDDLE DEMO

$("#add_new").click(function() { 

    $("#maintable").each(function() { 

     var tds = '<tr>'; 
     jQuery.each($('tr:last td', this), function() { 
      tds += '<td>' + $(this).html() + '</td>'; 
     }); 
     tds += '</tr>'; 
     if ($('tbody', this).length > 0) { 
      $('tbody', this).append(tds); 
     } else { 
      $(this).append(tds); 
     } 
    }); 
}); 

Answer 3

[Проверить эту ссылку ] [1]

[1]: http://jsfiddle.net/4KrwY/47/ 

это вы ожидали для?