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

时间:2014-06-20 15:15:34

标签: javascript html jsp

我有一个有一行的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个字段的相应值发生变化时,这需要运行时的值chnage

<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的相应(相同序列)字段应该会改变。由于某些项目限制,我无法更改表结构。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

正如Tap回答的那样,为每个字段(数组)分配不同的id。我想要添加的唯一内容是,我们应该使用c:out,同时将ID分配给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"/>

运行良好!! ;)

我很开心;这解决了我的大问题而不影响代码的结构...

再次感谢Tap,感谢您的建议。 :)