javascript - 如何根据另一个输入文本字段(存在于另一个 html 表中)的特定值更改一个输入文本字段(在一个 html 表中)的值

Question

我有一个 html 表，其中有一行。该行有两个 TD，其中包含自己的表(每个 TD 有 10 行，其中有 10 个输入字段)。我想根据第一个字段 onblur() 中的值更改来更改另一个相应文本字段的值。

第一个字段-.它从大小为 10 的数组中获取值

<tr>
<td valign="top">
<table width="85%" border="0" cellpadding="2" cellspacing="1" class="inputTable">
<tr>
<td width="60%">
<table width="60%" border="0" cellpadding="0" cellspacing="1">
<c:set var="input1" value="${someForm.value1}"></c:set>
<c:forTokens items="0,1,2,3,4,5,6,7,8,9" delims="," var="count">
<tr>
<td><input id="field1" name="field1" type="text" value="<c:out value="${input1[count]}" />" onblur="setText2(this)" maxlength="20" size="15">
</td>
</tr>
</c:forTokens>
</table>
</td>
</tr>
</table>
</td> 

第二个字段。当超过 10 个字段的相应值发生变化时，这需要在运行时更改值

<td valign="top">
<table width="85%" border="0" cellpadding="2" cellspacing="1" class="inputTable">
<tr>
<td width="60%">
<table width="60%" border="0" cellpadding="0" cellspacing="1">
<c:forTokens items="0,1,2,3,4,5,6,7,8,9" delims="," var="count">
<tr>
<td><input id="field2" name="field2" type="text"    value="" />" readonly class="readonly" maxlength="1" size="1">
</td>
</tr>
</c:forTokens>
</table>
</td>
</tr>
</table>
</td>
</tr>

Javascript:

<script>
function setText2(element) {
if(element.value)
{
document.getElementById("field2").value = element.value;
}else{
document.getElementById("indicator").value = "";
}
}
</script>

运行良好。但问题是我能够通过此确定哪个字段正在更改，但无法获取目标字段的引用。这会更改第二个字段的值，但始终位于第二个表的第一行。

请帮助我运行此命令，以便如果 table1 的字段发生更改，则表 2 的相应(相同序列)字段也应该更改。由于一些项目限制，我无法更改表结构。

Answer 1

getElementById() 正在选择 id="field2"的第一个元素。您不应该为多个元素提供相同的 id。尝试更改 id 以对应于计数，然后在您的 javascript 函数中，您可以获得与模糊输入的计数对应的 field2 输入。

将您的 field1 代码替换为:

 <input id="field1_${count}" name="field1" type="text" value="${input1[count]}"
        onblur="setText2(this)" maxlength="20" size="15"/>

将您的 field2 代码替换为:

<input id="field2_${count}" name="field2" type="text" value="" 
       readonly="readonly" class="readonly" maxlength="1" size="1">

然后更改您的 JavaScript 函数:

    function setText2(element) {
        if(element.value)
        {
            var changedId = element.id;
            var elementNumber = changedId.substring(changedId.indexOf('_') + 1);

            document.getElementById("field2_" + elementNumber).value = element.value;
        }else{
            document.getElementById("indicator").value = "";
        }
    }