Question

我有一对多的表行包含表单输入，我想在它们下面有一个总计行。我正在添加一个虚拟表格行，然后我想找到并用于总计。我以为我可以做一些类似$(this).closest("tr").find(".class").attr("id");"的事情，但我总是未定义。

举个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){ 
    $(".totals").change(function() {                           
        var tid = $(this).closest("tr").find(".totalsrow").attr("id");
        alert("id is " + tid);
    });
});
</script>
</head>
<body>              

        <table cellspacing="0" cellpadding="0" align="center" width="100%"> 
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td><strong>header</strong></td>
                <td><strong>header</strong></td>
                <td><strong>header</strong></td>
                <td><strong>header</strong></td>
                <td><strong>header</strong></td>
                <td><strong>header</strong>                    
            </tr>                                                                
            <tr>
                <td>val</td>
                <td>val</td>
                <td><input type="text" id="1" name="1" value="" class="totals" size="5" maxlength="15" /></td>
                <td><input type="text" id="2" name="2" value="" class="totals" size="5" maxlength="15" /></td>
                <td><input type="text" id="3" name="3" value="" class="totals" size="5" maxlength="15" /></td>
            </tr>
            <tr>
                <td>val</td>
                <td>val</td>
                <td><input type="text" id="4" name="4" value="" class="totals" size="5" maxlength="15" /></td>
                <td><input type="text" id="5" name="5" value="" class="totals" size="5" maxlength="15" /></td>
                <td><input type="text" id="6" name="6" value="" class="totals" size="5" maxlength="15" /></td>
            </tr>
            <tr id="totals1" class="totalsrow"></tr>                                
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td><strong>header</strong></td>
                <td><strong>header</strong></td>
                <td><strong>header</strong></td>
                <td><strong>header</strong></td>
                <td><strong>header</strong></td>
                <td><strong>header</strong>                    
            </tr>                                                                
            <tr>
                <td>val</td>
                <td>val</td>
                <td><input type="text" id="1" name="1" value="" class="totals" size="5" maxlength="15" /></td>
                <td><input type="text" id="2" name="2" value="" class="totals" size="5" maxlength="15" /></td>
                <td><input type="text" id="3" name="3" value="" class="totals" size="5" maxlength="15" /></td>
            </tr>
            <tr>
                <td>val</td>
                <td>val</td>
                <td><input type="text" id="4" name="4" value="" class="totals" size="5" maxlength="15" /></td>
                <td><input type="text" id="5" name="5" value="" class="totals" size="5" maxlength="15" /></td>
                <td><input type="text" id="6" name="6" value="" class="totals" size="5" maxlength="15" /></td>
            </tr>
            <tr id="totals2" class="totalsrow"></tr>
        </table>                                 
</body>
</html>

根据输入信息的输入，我希望返回totals1或totals2。我做错了什么？

Answer 1

.closest（）在祖先树中搜索匹配元素，在这里您正在寻找下一个兄弟元素。

尝试

$(document).ready(function(){ 
    $(".totals").change(function() {                           
        var tid = $(this).closest("tr").nextUntil(".totalsrow").last().next().attr("id");
        alert("id is " + tid);
    });
});

演示：Fiddle

Answer 2

这也可以使用nextAll（）。

$(document).ready(function(){ 
    $(".totals").change(function() {                           
        var tid = $(this).closest("tr").nextAll(".totalsrow").attr("id");
        alert("id is " + tid);
    });
});

基于jQuery中的类获取下一个tr的id

2 个答案: