Search jQuery

jQuery Forum

Accessing table cells by rowindex

in Using jQuery • 6 years ago

Hi,

I'm dynamically creating an HTML table using JQuery. I'm not assigning id's to the tr or td tags in the table. The reason I'm not, is that it seems complicated, given that the table is initially loaded and then the user can add and delete rows. I'll also need to sort the table on demand.

I maintain the current row the user has clicked on as a global variable (curRow) using this...
$("#prodTable tbody tr").live('click', function() {
curRow = $(this)[0].rowIndex;
});

I want to do input validations on certain cells based on values in other cells in the row. for example, the value of cellA cannot be greater than the sum of the values of cellB-CellD.

The question is, given a certain table rowindex, how can I access the cells in the row? Is this not a good approach?

Thanks

Replies(4)

Kevin B

Re: Accessing table cells by rowindex

6 years ago

if the row was clicked, you can access the row's cells with

$("#prodTable tbody tr").live('click', function() {
// modify cells by clicked row
$(this).find('td').css("background-color","#FF0000");
});

if all you have is the row index, you can do:

function modifyCellsInRow(index) {
// modify cells by index
$('#prodTable tbody tr:eq('+index+') td').css("background-color","#FF0000");
};
modifyCellsInRow(0);

Edit: Your function can also be optimized a little,

$("#prodTable tbody tr").live('click', function() {
curRow = this.rowIndex;
});

$("#prodTable tbody tr").live('click', function() {
curRow = $(this).index('#prodTable tbody tr');
});

the first one should be quicker, the jQuery version makes a couple function calls and has to query the DOM which will slow things down.

-- Kevin

------------------------------------------------
http://www.tentonaxe.com

superstit..

Re: Accessing table cells by rowindex

6 years ago

How do I access the value of a certain cell in the row (not all td's)?

For example, if I have this table:

<table>
<tr>
<td><input type="text" value="John"/></td>
<td><input type="text" value="Brown"/></td>
<td><input type="text" value="26"/></td>
<td><input type="text" value="0"/></td>
</tr>
<tr>
<td><input type="text" value="Mary"/></td>
<td><input type="text" value="Smith"/></td>
<td><input type="text" value="8"/></td>
<td><input type="text" value="0"/></td>
</tr>
</table>

If the user clicks on the 4th cell of row #1 and edits that value from 0, how can I check that the number they enter is less than the value in the 3rd cell (26)?

Kevin B

Re: Re: Accessing table cells by rowindex

6 years ago

you can access cells by their index :eq(), just keep in mind, it is zero based. So, to do what you asked above, you would:

// get first table row
var $tableRow = $('#tableId tbody tr:eq(0)');
// which cell has a greater value
if ($('td:eq(3) input', $tableRow).val() > $('td:eq(2) input', $tableRow).val()) {
// cell 4 is greater than cell 3
} else {
// cell 4 is less than or equal to cell 3
}

-- Kevin

------------------------------------------------
http://www.tentonaxe.com

superstit..

Re: Accessing table cells by rowindex

6 years ago

Thanks Kevin!

Top Reply

Response title

Attachments

jQuery Forum

Accessing table cells by rowindex

Replies(4)

Re: Accessing table cells by rowindex

Re: Accessing table cells by rowindex

Re: Re: Accessing table cells by rowindex

Re: Accessing table cells by rowindex

Statistics

Tags

Actions