javascript获取对表的同一单元格中的控件的引用

时间:2013-01-21 16:40:05

标签: javascript

我有一个从数据库中的数据生成的表。它可能有3行和2个单元格。

每个单元格中都有一个复选框和2个隐藏的表单字段。

因此,典型的行可能如下所示:

<tr>
<td>
<input type="checkbox" id="Assign" onclick="setchanged(this);">
<input type="hidden" id="hfChanged" value="0">
<input type="hidden" id="hfAgentID value="272">
</td>
<td>
<input type="checkbox" id="Assign" onclick="setchanged(this);">
<input type="hidden" id="hfChanged" value="0">
<input type="hidden" id="hfAgentID value="324">
</td>
</tr>

要求是 - 单击复选框时,应将同一单元格中hfChanged隐藏字段的值设置为1.

这适用于Internet Explorer:

function setchanged(me)
{
me.parentElement.all("hfChanged").value = 1;
}

如何在Firefox或Chrome等符合标准的浏览器中设置hfChanged的值?

3 个答案:

答案 0 :(得分:1)

使用重复类而不是ID

<tr>
    <td>
    <input type="checkbox" class="Assign" onclick="setchanged(this);">
    <input type="hidden" class="hfChanged" value="0">
    <input type="hidden" class="hfAgentID value="272">
    </td>
    <td>
    <input type="checkbox" class="Assign" onclick="setchanged(this);">
    <input type="hidden" class="hfChanged" value="0">
    <input type="hidden" class="hfAgentID value="324">
    </td>
</tr>

然后将您的函数更改为按类名选择,并迭代结果。

function setchanged(me) {
    var changed = me.parentNode.querySelectorAll(".hfChanged");

    for (var i = 0; i < changed.length; i++) {
        changed[i].value = 1;
    }
}

.querySelectorAll方法在IE6 / 7中不起作用,如果这对你很重要。如果确实如此,那么为了更好的兼容性而进行调整并不难。


我现在看到同一个单元格中只有一个。在这种情况下,您可以改为执行此操作。

function setchanged(me) {
    me.parentNode.querySelector(".hfChanged").value = 1;
}

答案 1 :(得分:0)

此代码未经过测试,但可以为您提供一个起点。

$("input[type=checkbox]").change(function(){
     $(this).siblings(".hfChanged").prop("value", this.checked ? 1 : 0);
});

注意:将ID更改为类。

答案 2 :(得分:0)

您可以使用以下函数找出this answer

中给出的下一个元素
function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);
    return elem;        
}

Working demo here

代码:

function setchanged(me){
    next(me).value = me.checked == true ? 1 : 0;
}

function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);
    return elem;        
}