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

how to change value of one input text field (in one html table) based on a specific value of another input text field (present in another html table)

本文关键字：HTML 一个 表中 另一个 输入 文本 字段 何根 的值 存在      更新时间：2023-09-26

我有一个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的各自(相同的串行)字段应该改变。由于一些项目限制，我不能改变表结构。

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 = "";
        }
    }

根据Tap的回答，为每个字段(数组)分配不同的id。我唯一想添加的是，我们应该使用c:out将number赋值给id，如下所示(否则id将不会像预期的那样有数字，而是将字符串赋值为"field1_${count}"):

使用:

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

运行良好!!;)

我很开心;这在不影响代码结构的情况下解决了我的大问题……

再次感谢你的建议。:)

相关文章：