jQuery Table - Reference User Input Row Names and Values

Question

I have several tables which are generated by another application, which I have no control over. I am totally new to jQuery and ajax, and have only a limited knowledge of jsp. Two sample rows are:

<table class="sicknessForm">                  
<tr id="row_0" class="datarow">
 <td id="col_2"><input name="row_0-col_2"  class="tabcell" value="Injuries"></td>
 <td id="col_4"><input name="row_0-col_4"  class="tabcell" value="01"></td>
 <td id="col_5"><input name="row_0-col_5"  class="tabcell" value="2"></td>
 <td id="col_6"><input name="row_0-col_6"  class="tabcell" value="5"></td>
</tr>  

<tr id="row_1" class="datarow">
 <td id="col_2"><input name="row_1-col_2"  class="tabcell" value="Absences"></td>
 <td id="col_4"><input name="row_1-col_4"  class="tabcell" value="100"></td>
 <td id="col_5"><input name="row_1-col_5"  class="tabcell" value="102"></td>
 <td id="col_6"><input name="row_1-col_6"  class="tabcell" value="105"></td>
</tr>  
</table>

There are more rows and columns in the actual tables. What I need to do is to pass the ordered row information to the database, e.g.:
Injuries, 1, 2, 5 ....
Absences 100, 102, 105...

I can retrieve the values for each input using:

 $('#SicknessForm .userInput').each(function() {
  alert($(this).val());
 });

1) How can I loop through each row, get the value from the first column (Injuries) and place the data into an array to send to the server? 2) How do I reference the first row of each column to disable user input on it?
$(:HowDoIReferenceThis).attr('disabled', ''); 3) I need to validate that each cell is numeric, other than the first column. Any pointers on this (otherwise I can check it in my servlet), especially on how to loop through all valid input cells (everything except 'Injuries','Abences', ... cells).

Many Thanks! Vic

Answer 1

//question 1
$('.sicknessForm tr td:first-child input').attr('disabled', 'disabled');

//question 2
var results = {}
$('.sicknessForm tr').each(function(){   
    var data = new Array();
    $(this).find('input:enabled').each(function(){
        data.push($(this).val());
    });
    results[$(this).find('input:disabled').val()]=data;
});

At this point the results object will contain properties pointing to each data point.

For question 3:

You can validate it here, or you could do in the inner each before pushing it onto those arrays. As far as validating numbers a simple way might be:

if (/^\d+$/.test($(this).val())){
    //data is good
}

Here's a jsfiddle I made to mess around with your stuff: http://jsfiddle.net/YVkTy/

Answer 2

UPDATED

DEMO: http://jsbin.com/imeno3/3

All in one ready to go!

$(function() {
    var row = [];
    $('.datarow').each(function(i) {
        row.push($('td input:eq(0)', this).val() + ' -> ');
        $('td input:gt(0)', this).each(function(e) {
            if (isNaN(this.value)) {
                $(this).attr('disabled', true);
            } else {
                row.push(this.value);
            }
        });
    });
    var send_to_ajax = row.join(' ');
});

UPDATED 2

in response to comment

  $('.tabcell').change(function() {
    if (isNaN(this.value)) { 
    $(this).css('background','red');
    } else {
    $(this).css('background','green');
    }
  });

Answer 3

Thanks so much aSeptik and Ryley, I really appreciated your quick and meaningful answers. Here is how I plan on implementing this:

/*
* Function to add all elements from a row into an array
* and change the first column from an input type to its text value
*/
$(function() {
    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) {
            row.push(this.value);
        });
    });
    var send_to_ajax = row.join(' ');
});

/*
* Function to check whether or not an elements value is numeric.
* If the value is non-numeric, the elements background colour is set to red
* and the div element 'errorMessage' displays a message for the user
*/
$('.tabcell').change(function() {
    if (isNaN(this.value)) { 
        $(this).css('background','red');
        $('div.errorMessage').html("Invalid value entered.");
        $('div.errorMessage').css('color','red');
    } else {
        $(this).css('background','white');
        $('div.errorMessage').html('');
    }
});

And I have a div element above the table with class="errorMessage", which will display the error message.

Now all I have to do is to figure out how to send the data to the server with ajax (?).

Vic