浏览器有时会添加<tbody>

Question

I saw a similar question here, but was not sure of a solution, and the circumstances are slightly different, so I thought I would ask it again.

I have a page that has both PHP and JavaScript. The PHP retrieves info from a database, and creates a checkbox using it. This checkbox is wrapped inside a table for correct formatting. There is a button on the page, and when it is pressed, JavaScript creates a new checkbox, with the same formatting as the one created in PHP. I have some code that allows me to see if any of the checkboxes are pressed:

alert(selectedCheckBoxWrapper.firstChild.firstChild.firstChild.checked);

As you can see the code attempts to look inside the <table> wrapper and find out if the checkbox is checked or not. The problem that I am having is, the checkbox created in PHP is different to the cone created in JavaScript.

PHP checkbox:

<table style="visibility: visible; position: absolute; top: 104px; left: 177px; width: 150px; height: 25px;" id="obj1" border="0" name="btn_177_1_test1">
<tbody>
<tr>
<td valign="middle" width="1">
<input type="checkbox" id="obj1_child" disabled="">
</td>
<td valign="middle" style="font-size: 13px;">
<label for="obj1_child">test1</label>
</td>
</tr>
</tbody>
</table>

JavaScript checkbox:

<table style="visibility: visible; position: absolute; top: 216px; left: 166px; width: 150px; height: 25px;" id="obj2" border="0" name="btn_177_1_test2" >
<tr>
<td valign="middle" width="1">
<input type="checkbox" id="obj2_child" disabled="">
</td>
<td valign="middle" style="font-size: 13px;">
<label for="obj2_child">test2</label>
</td>
</tr>
</table>

The PHP checkbox has a <tbody> tag, while the JavaScript one does not. This messes up my code to see if it is checked or not, as if it tries to find a checkbox generated by PHP, it is unable to find the checkbox checked.

I have included the code that I use to create the checkboxes.

PHP create code:

echo "<table style=\"visibility: " . $part['visible'] . "; position: absolute; top: " . $part['top'] . "px; left: " . $part['left'] . "px; width: " . $part['width'] . "px; height: " . $part['height'] . "px;\" id='obj" . $part['part_id'] . "' border=0 name='btn_" . $part['stacks_id'] . "_" . $part['cards_id'] . "_" . $part['name'] . "'>
<tr>
<td valign='middle' width=1>
<input type='checkbox' id=\"obj" . $part['part_id'] . "_child\" " . $part['disabled'] . ">
</td>
<td valign=\"middle\" style=\"font-size: 13px;\">
<label for=\"obj" . $part['part_id'] . "_child\">" . $part['name'] . "</label>
</td>
</tr>
</table>";

JavaScript create code:

var newTableElement = document.createElement( "table" );
newTableElement.setAttribute('style', newElementStyle );
newTableElement.setAttribute('id', newElementID );
newTableElement.border = 0;
newTableElement.setAttribute('name', newElementName );
var newTableElementRow = document.createElement( "tr" );
newTableElement.appendChild( newTableElementRow );
var newTableElementCell1 = document.createElement( "td" );
newTableElementCell1.setAttribute("valign", "middle" );
newTableElementCell1.width = 1;
newTableElementRow.appendChild( newTableElementCell1 );
var newTableElementCell2 = document.createElement( "td" );
newTableElementCell2.setAttribute("valign", "middle" );
newTableElementCell2.style.fontFamily = "'Lucida Grande', Verdana, Arial, sans-serif;";
newTableElementCell2.style.fontSize = "13px";
newTableElementCell2Label = document.createElement( "label" );
newTableElementCell2Label.setAttribute('for', whatElement.getAttribute('id') + "_child" );
newTableElementCell2Label.innerHTML = innerContents;
newTableElementCell2.appendChild( newTableElementCell2Label );
newTableElementRow.appendChild( newTableElementCell2 );
var newElement = document.createElement( "input" );
newElement.setAttribute('type', 'checkbox' );
newElement.setAttribute('id', whatElement.getAttribute('id') + "_child" );
newTableElementCell1.appendChild( newElement );

The variables such as newelementStyle and innerContents just contain preset values.

Is there something wrong with my code? Or is there a way to tell the browser not to add in the <tbody> tags?

Answer 1

When creating a table element with JavaScript, you need to insert the tbody element in order to match the structure of the table element as created by the HTML parser. The HTML markup need not have tbody tags, but the tbody element is there.

So you simply need to modify the JavaScript code so that after creating the table element, it creates a tbody element, makes it a child of the table, and later makes all tr elements children of the tbody, not the table.