jQuery Table - Reference User Input Row Names and Values

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, 1开发者_如何学JAVA05...

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).

---

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');
    }
  });

---

//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/