jQuery Reference First Column in HTML Table

Question

I have a table where all of the cells are INPUT tags. I have a function which looks for the first input cell and replaces it with it's value. So this:

<tr id="row_0" class="datarow">
    <td><input class="tabcell" value="Injuries"></td>
    <td><input class="tabcell" value="01"></td>

becomes this:

<tr id="row_0" class="datarow">
    <td>Injuries</td>
    <td><input class="tabcell" value="01"></td>

Here is the first part of the function:

function setRowLabels() {

    var row = [];
    $('.dataRow').each(function(i) {
        row.push($('td input:eq(0)', this).val() + ' -> ');
        $('td input:eq(0)', this).replaceWith($('td input:eq(0)', this).val());
        $('td input:gt(0)', this).each(function(e) {
    etcetera

But when the page reloads, the first column is not an input type, so it changes the second column to text too!

Can I tell it to only change the first column, no matter what the type is? I tried
$('td:eq(0)', this).replaceWith($('td:eq(0)', this).val()); but it does not work.

Any suggestions appreciated!

user113716 · Accepted Answer · 2010-05-27 18:55:40Z

1

With your version, you were selecting the td instead of the input.

  // Selects the first td in the row
$('td:eq(0)', this).replaceWith($('td:eq(0)', this).val());

Try this:

  // Selects the input of the first td in the row
$('td:eq(0) input', this).replaceWith($('td:eq(0) input', this).val());

edited May 27, 2010 at 18:55

answered May 27, 2010 at 18:41

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vic Over a year ago

When I first read your response I thought that you had typed in exactly what I had tried the first time. After re-reading, I see that you changed 'td input:eq(0)' to 'td:eq(0) input'<br /> And it worked! Thanks!

phx_zs · Accepted Answer · 2010-05-27 18:38:19Z

0

Try the CSS td:nth-child Pseudo-class.

http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-28b.html

answered May 27, 2010 at 18:38

phx_zs

1471 silver badge11 bronze badges

3 Comments

phx_zs Over a year ago

Also, not sure if you caught this but you have "datarow" as your tr's class attribute value, and "dataRow" as the value in your JQuery function.

Vic Over a year ago

Oops, typo. They are both dataRow.

Vic Over a year ago

The CSS td:nth-child Pseudo-class is now bookmarked! Pretty bright colours though...

Collectives™ on Stack Overflow

jQuery Reference First Column in HTML Table

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related