Question

我有几个由另一个应用程序生成的表，我无法控制。我是jQuery和ajax的新手，对jsp知之甚少。两个示例行是：

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

实际表中有更多行和列。我需要做的是将有序行信息传递给数据库，例如：伤害，1,2,5 .... 缺席100,102,105 ......

我可以使用以下方法检索每个输入的值：

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

如何遍历每一行，从第一列获取值（Injuries）并将数据放入数组以发送到服务器？
如何引用每列的第一行以禁用用户输入？
```
$(:HowDoIReferenceThis).attr('disabled', '');
```
我需要验证每个单元格是否为数字，而不是第一列。关于这个的任何指针（否则我可以在我的servlet中检查它），特别是如何遍历所有有效的输入单元格（除了'Injuries'，'Abences'，...单元格之外的所有内容）。

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

此时，结果对象将包含指向每个数据点的属性。

问题3：

您可以在此处对其进行验证，或者您可以在将其推入这些阵列之前在内部进行验证。就验证数字而言，一种简单的方法可能是：

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

这是我用来捣乱你的东西的一个小问题：http://jsfiddle.net/YVkTy/

Answer 2

更新

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

一切准备就绪！

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

更新2

回应评论

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

jQuery表 - 引用用户输入行名称和值

2 个答案: