Таблица jQuery - ссылки на имена и значения строк ввода данных пользователем - PullRequest
0 голосов
/ 27 мая 2010

У меня есть несколько таблиц, сгенерированных другим приложением, которые я не могу контролировать. Я совершенно новичок в 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());
 });
  1. Как я могу пройти по каждой строке, получить значение из первого столбца (травмы) и поместить данные в массив для отправки на сервер?
  2. Как мне ссылаться на первую строку каждого столбца, чтобы отключить ввод данных пользователем?

    $(:HowDoIReferenceThis).attr('disabled', '');
    
  3. Мне нужно проверить, что каждая ячейка числовая, кроме первого столбца. Любые указатели на это (в противном случае я могу проверить это в моем сервлете), особенно о том, как пройти через все допустимые входные ячейки (все, кроме «Травмы», «Отступы», ... клетки).

Ответы [ 2 ]

0 голосов
/ 27 мая 2010

ОБНОВЛЕНО

ДЕМО: 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');
    }
  });
0 голосов
/ 27 мая 2010
//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
}

Вот jsfiddle, который я сделал, чтобы возиться с вашими вещами: http://jsfiddle.net/YVkTy/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...