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!

Thanks

Answer 1

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

Answer 2

Try $("tr:first-child")

Answer 3

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());