CODEWITHSUNDEEP
javascriptjqueryhtml
Chris
Chris

Reputation: 1642

Row added twice to table with jQuery

I want to create a table with jquery. My code is like this:

function showGrid(url, container, columns, page) {
    jQuery(container).empty();

    var tr = jQuery("<tr class=\"mobileGridHeader\"><tr>");

    var tdTotalRows = jQuery("<td>test</td>");
    jQuery(tr).append(tdTotalRows);

    var table = jQuery('<table class="mobileGrid"></table>');
    jQuery(table).append(tr);

    jQuery(container).append(table);
}

The container is a div on the page. The problem is, that the tr is added twice to the container and I do not know why.

enter image description here

It is not just a Browser error, in the Html I can see the code twice.

<table class="mobileGrid">
   <tbody>
       <tr class="mobileGridHeader">
           <td>test</td>
       </tr>
       <tr>
           <td>test</td>
       </tr>
   </tbody>
</table>

The weird is also, that the css class "mobileGridHeader" is only added in the first row.

Upvotes: 0

Views: 1243

Answers (3)

nitin patil
nitin patil

Reputation: 1

My tr gets added twice.Means if there are 3 rows(A,B,C) then. 6 rows will be added like (A,A,B,B,C,C)

var html1 = '<tr>' +
                    `<td><input type="text" name="EventName_${i}" value="${v.EventName}" /></td>
                <td><input type="text" name="BValue_${i}" value="" /></td>
                <td><input type="text" name="BFactor_${i}" value="${v.BFactor}" /></td>
                <td><input type="text" name="BAmount_${i}" value="" /></td>
                <td><input type="text" name="LValue_${i}" value="" /></td>
                <td><input type="text" name="LFactor_${i}" value="${v.LFactor}" /></td>
                <td><input type="text" name="LAmount_${i}" value="" /></td>
                <td><button name="rowIndex" style="float:right;" value="${i}" type="submit">Save</button></td>` +
                    '</tr>';
                i++;
                $("#Create tbody").append(html1);

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78525

The problem is that you haven't closed off your tr tag:

var tr = jQuery("<tr class=\"mobileGridHeader\"><tr>");
                                                ^^^^

Needs to be:

var tr = jQuery("<tr class=\"mobileGridHeader\"></tr>");

Or even:

var tr = jQuery("<tr class=\"mobileGridHeader\">");

Otherwise jQuery will auto-close both tr tags, creating two rows.

Upvotes: 3

dotnetom
dotnetom

Reputation: 24901

You do not close tr tag in your creation so 2 elements are created. To fix the issue instead of this line:

var tr = jQuery("<tr class=\"mobileGridHeader\"><tr>");

use this line (backslash added):

var tr = jQuery("<tr class=\"mobileGridHeader\"></tr>");

Upvotes: 4

Related Questions