读取行跨度内的表行答案

【问题标题】：Read table rows within rowspan读取行跨度内的表行
【发布时间】：2013-09-09 10:15:18
【问题描述】：

我正在寻找一种在特定条件下使用 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>

【问题讨论】：

嗨，我看过你的代码，它做了我已经拥有的 + 用行跨度突出显示一行。我正在寻找迭代行数据if(rsp>0) { $(this).closest('tr').nextAll().slice(0,rsp-1).each(function(){ //read data etc. <--I need this + proper above to let it happen $(this).addClass('sth-class'); //mark a row with a class }); }
我不需要突出显示任何行。在上一个答案中，我指出了代码中的位置和实际问题。请看上面几行。
检查这个小提琴并打开浏览器控制台查看行数据jsfiddle.net/QDD5R/4
哇！这几乎是我正在寻找的东西。您能否告诉我是否有任何简单的方法可以读取行内行，以便它们易于访问，例如：var srvc_desc = $(this).closest("tr").find(".srvc_desc").text();？谢谢
我认为您也必须对其进行迭代，如果您不这样做，您只会看到最后一个条目文本。无论如何检查我的答案，如果没问题，然后将其标记为答案。

标签： jquery html-table

【解决方案1】：

试试这个：

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

希望对你有帮助。

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

【讨论】：

@abacki.john::: 可以吗？
是的，感谢您的帮助。您的解决方案让我对想法有了一些了解，并让我（通过一些细微的修改）得到了我想要的。