2013-09-09 2 views
0

Я ищу решение для чтения строк таблицы с jquery, но при определенных условиях. Первый столбец таблицы может содержать rowspan. У меня есть кнопка (ввод) в последнем столбце первой строки коллекции rowspan, с помощью которой мне нужно перебирать остальные строки в этом столбце строк.Прочитать строки таблицы в rowspan

Я знаю, как читать данные таблицы с помощью селекторов классов, но я не знаю, как читать только строки в rowspan. Я не мог найти какую-либо полезную информацию где-нибудь здесь, но если уже есть ответ, пожалуйста, предоставьте мне ссылку. Если нет, помогите мне понять эту идею.

Я пробовал jquery each(), next(), javascript для цикла, но ни один из них не привел меня ко всему, что работает.

Это где я застрял:

$("#test tr td:last-child input:submit").on("click", function() { 
var rsp = $(this).closest("tr").find(".hostname").attr('rowspan'); 

if(rsp>0) { 
    $(this).closest('tr').nextAll().slice(0,rsp-1).each(function(){ 
     //read data etc. 
     $(this).addClass('sth-class'); //mark a row with a class 
    }); 
} 

});

Ниже приведена таблица, которую я пытаюсь прочитать.

<table id="test" width="100%" border="1"> 
     <tr> 
      <td class="hostname">a1</td> 
      <td class="srvc_desc">b1</td> 
      <td class="srvc_stat">CRITICAL</td> 
      <td class="srvc_last">05-02-2013 00:54:42</td> 
      <td class="srvc_dur">0d 3h 53m 12s</td> 
      <td class="srvc_att">1/1</td> 
      <td class="srvc_excp">Connection refused by host</td> 
      <td> 
      <input class="send" type="submit" onclientclick="Javascript:return false;" value="Check" /> 
      </td> 
     </tr> 
     <tr> 
      <td class="hostname" rowspan="4">a2</td> 
      <td class="srvc_desc">b2</td> 
      <td class="srvc_stat">CRITICAL</td> 
      <td class="srvc_last">05-02-2013 00:47:02</td> 
      <td class="srvc_dur">0d 3h 11m 55s</td> 
      <td class="srvc_att">1/1</td> 
      <td class="srvc_excp">Connection refused by host</td> 
      <td> 
      <input class="send" type="submit" onclientclick="Javascript:return false;" value="Check" /> 
      </td> 
     </tr> 
     <tr> 
      <td class="srvc_desc">b3</td> 
      <td class="srvc_stat">CRITICAL</td> 
      <td class="srvc_last">05-02-2013 00:54:13</td> 
      <td class="srvc_dur">0d 3h 49m 55s</td> 
      <td class="srvc_att">1/1</td> 
      <td class="srvc_excp">Connection refused by host</td> 
      <td> 
      <input class="send" type="submit" onclientclick="Javascript:return false;" value="Check" /> 
      </td> 
     </tr> 
     <tr> 
      <td class="srvc_desc">b4</td> 
      <td class="srvc_stat">CRITICAL</td> 
      <td class="srvc_last">05-02-2013 00:54:14</td> 
      <td class="srvc_dur">0d 3h 53m 10s</td> 
      <td class="srvc_att">3/3</td> 
      <td class="srvc_excp">Connection refused by host</td> 
      <td> 
      <input class="send" type="submit" onclientclick="Javascript:return false;" value="Check" /> 
      </td> 
     </tr> 
     <tr> 
      <td class="srvc_desc">b5</td> 
      <td class="srvc_stat">CRITICAL</td> 
      <td class="srvc_last">05-02-2013 00:54:42</td> 
      <td class="srvc_dur">0d 3h 53m 12s</td> 
      <td class="srvc_att">1/1</td> 
      <td class="srvc_excp">Connection refused by host</td> 
      <td> 
      <input class="send" type="submit" onclientclick="Javascript:return false;" value="Check" /> 
      </td> 
     </tr> 
     <tr> 
      <td class="hostname">a3</td> 
      <td class="srvc_desc">b6</td> 
      <td class="srvc_stat">CRITICAL</td> 
      <td class="srvc_last">05-02-2013 00:54:42</td> 
      <td class="srvc_dur">0d 3h 53m 12s</td> 
      <td class="srvc_att">1/1</td> 
      <td class="srvc_excp">Connection refused by host</td> 
      <td> 
      <input class="send" type="submit" onclientclick="Javascript:return false;" value="Check" /> 
      </td> 
     </tr> 
     <tr> 
      <td class="hostname">a4</td> 
      <td class="srvc_desc">b5</td> 
      <td class="srvc_stat">CRITICAL</td> 
      <td class="srvc_last">05-02-2013 00:54:42</td> 
      <td class="srvc_dur">0d 3h 53m 12s</td> 
      <td class="srvc_att">1/1</td> 
      <td class="srvc_excp">Connection refused by host</td> 
      <td> 
      <input class="send" type="submit" onclientclick="Javascript:return false;" value="Check" /> 
      </td> 
     </tr> 
    </table> 
+0

Привет, я видел ваш код, и он делает то, что у меня уже есть + выделение строки с помощью rowspan. Я ищу sth для итерации по данным строки 'if (rsp> 0) { $ (this) .closest ('tr'). NextAll(). Slice (0, rsp-1) .each (function() { // прочитайте данные и т. Д. <- Мне нужно это + правильно, чтобы это произошло $ (this) .addClass ('sth-class'); // пометить строку классом }); } ' –

+0

Мне не нужно выделять строки. В предыдущем ответе я указал место в коде и фактическую проблему. Пожалуйста, взгляните на несколько строк выше. –

+0

проверить эту скрипку и открыть консоль браузера, чтобы увидеть данные строк http://jsfiddle.net/QDD5R/4/ – maverickosama92

ответ

0

попробовать это:

$("#test tr td:last-child input:submit").on("click", function() { 
var rsp = $(this).closest("tr").find(".hostname").attr('rowspan'); 

if(rsp>0) { 
    $(this).closest('tr').nextAll().slice(0,rsp-1).each(function(){    
     var data = readData($(this));    
     $(this).addClass('sth-class'); //mark a row with a class    
    }); 
    } 
}); 

function readData(row){ 
    var data = []; 
    row.children("td:not(:last-child)").each(function(){ 
     data.push($(this).html()); 
    }); 

    return data; 
} 

рабочую скрипку здесь: http://jsfiddle.net/QDD5R/4/

Я надеюсь, что это помогает.

Вы должны прочитать ряд один через каждый или любой другой цикл. Благодарю.

+0

@ abacki.john ::: это нормально? – maverickosama92

+0

Да, спасибо за вашу помощь. Ваше решение дало некоторое представление о идее и позволило мне (через некоторые небольшие изменения) получить то, что я хотел. –