CODEWITHSUNDEEP
jquery
user1496307
user1496307

Reputation: 15

jquery append() display abnormally

i am trying to append table row but it is not displaying properly instead of adding the row downwardly it is adding it to the side, here is my code

$(document).ready(function(){
    $('.addbtn').on('click', function(){
           var len = $('input:checked').parent().siblings('td').length;
            var tablechild;
            $('input:checked').each(function(){
                 $this = $(this);
                 tablechild = $('.orderpanel').append("<tr>");
                   for(i=0; i<len; i++){
                      tablechild += $('.orderpanel').append("<td>");

                      tablechild += $('.orderpanel').append($this.parent().siblings('td').eq(i).text());
                      tablechild += $('.orderpanel').append("</td>");
                    }   
                   tablechild += $('.orderpanel').append("</tr>");
              });
     });
  });

and here is my html table

<TABLE class="orderpanel" style="width:100%; border-collapse:collapse; border: solid 1px #000000"><TBODY>


</TBODY></TABLE>

i am just at a cross road need help, thanks in advance

Upvotes: 1

Views: 57

Answers (1)

David
David

Reputation: 218867

I don't think this is doing what you think it's doing:

tablechild = $('.orderpanel').append("<tr>");
tablechild += $('.orderpanel').append("<td>");

This would likely result in invalid markup:

<table>
    <tbody class="orderpanel">
        <tr></tr>
        <td></td>
    </tbody>
</table>

Instead, build the entire node as one string and append the whole thing when it's done. Something like this:

var newRow = "<tr>";
for(i=0; i<len; i++) {
    newRow += "<td>";
    newRow += $this.parent().siblings('td').eq(i).text();
    newRow += "</td>";
}   
newRow += "</tr>";
$('.orderpanel').append(newRow);

Upvotes: 2

Related Questions