Modifying table row using javascript

From EKiniWiki

Jump to: navigation, search

[edit] Scenario 1: You have a row and you want to modify all the columns at the same time

Let's say you have already set a class for the <TR>, so you wont be able to call the Id of the row and change it's class using Javascript. What you can do is to change the class per <TD> instead.

//the JavaScript code
function rowHasClaim(row_id)
{
    var row_bold = document.getElementById('row'+row_id);
    var cols = row_bold.cells.length;
    for (i=0; i<cols; i++) {
        row_bold.cells[i].style.fontWeight = 'bold';
    }
}

//the HTML code
//you will need some "event", like onClick or onMouseOver to call our Javascript function above.
<table>
    <tr id="row0">
        <td>will become bold</td>
        <td>will become bold</td>
        <td>will become bold</td>
    </tr>
    <tr id="row1">
        <td>will become bold</td>
        <td>will become bold</td>
        <td>will become bold</td>
    </tr>
    <tr id="row2">
        <td>will become bold</td>
        <td>will become bold</td>
        <td>will become bold</td>
    </tr>
</table>

[edit] Other References

Adding_a_table_row_using_javascript: shows an example on how you can add a table row dynamically.

Personal tools
Bookmarks