Question

我正在寻找一种解决方案来使用jquery读取表行但在某些条件下。表的第一列可能包含rowspan。我在rowspan集合的第一行的最后一列中有一个按钮（输入），我需要使用该按钮来遍历此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>

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

我希望它有所帮助。

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

在rowspan中读取表行

1 个答案: