0

我正在寻找一种在特定条件下使用 jquery 读取表行的解决方案。表的第一列可能包含行跨度。我在 rowspan 集合的第一行的最后一列中有一个按钮（输入），我需要使用它来遍历此 rowspan 中的其余行。

我知道如何使用类选择器读取表数据，但我不知道如何仅读取行跨度内的行。我在这里找不到任何有用的信息，但如果已经有答案，请给我一个链接。如果没有，请帮助我理解这个想法。

我尝试了 jquery each()、next()、javascript for 循环，但这些都没有让我有任何工作。

这是我卡住的地方：

$("#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>
4

1 回答 1

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/

我希望它有所帮助。

您必须通过每个循环或任何其他循环逐行读取。谢谢。

于 2013-09-09T11:26:56.243 回答