如何给table里的input赋值

145 阅读 0 评论 96 点赞

我是靠谱客的博主大胆小海豚，这篇文章主要介绍如何给table里的input赋值，现在分享给大家，希望可以做个参考。

如以下场景，我要根据用户选择的关系自动填充性别

复制代码

<table cellspacing="1" cellpadding="0"  align="center" class="tab" BORDER=0 width="70%" style="border-collapse:separate;border-spacing:1;" id="familyTab">
        <caption>
        	家庭成员及主要社会关系
        </caption>
        <tr>
            <th width="15%" style="text-align:center;">关系</th>
            <th width="5%"  style="text-align:center;">性别</th>
        </tr>
<tr>
            <td align="center">
				<select name="Relationship"  onchange="updateSex(1)">
					<option value="无" >无</option>
					<option value="父亲" >父亲</option>
					<option value="母亲" >母亲</option>
				</select>
			</td>
            <td align="center"><input type="text" name="Sex"  			class="learnvalue" value="aaa"  readonly="readonly"/></td>
        </tr>
        <tr>
            <td align="center">
				<select name="Relationship"  onchange="updateSex(2)">
					<option value="无" >无</option>
					<option value="父亲" >父亲</option>
					<option value="母亲" >母亲</option>
				</select>
			</td>
            <td align="center"><input type="text" name="Sex"  			class="learnvalue" value=""  readonly="readonly"/></td>
        </tr>
    </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 <table cellspacing="1" cellpadding="0"  align="center" class="tab" BORDER=0 width="70%" style="border-collapse:separate;border-spacing:1;" id="familyTab">
        <caption>
        	家庭成员及主要社会关系
        </caption>
        <tr>
            <th width="15%" style="text-align:center;">关系</th>
            <th width="5%"  style="text-align:center;">性别</th>
        </tr>
<tr>
            <td align="center">
				<select name="Relationship"  onchange="updateSex(1)">
					<option value="无" >无</option>
					<option value="父亲" >父亲</option>
					<option value="母亲" >母亲</option>
				</select>
			<!--<input type="hidden" name="Relationship"  	class="learnvalue" value="" />--></td>
            <td align="center"><input type="text" name="Sex"  			class="learnvalue" value="aaa"  readonly="readonly"/></td>
        </tr>
        <tr>
            <td align="center">
				<select name="Relationship"  onchange="updateSex(2)">
					<option value="无" >无</option>
					<option value="父亲" >父亲</option>
					<option value="母亲" >母亲</option>
				</select>
			</td>
            <td align="center"><input type="text" name="Sex"  			class="learnvalue" value=""  readonly="readonly"/></td>
        </tr>
    </table>

当下拉框change时调用如下方法，直接获取table，往下推出input

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	function updateSex(i){
	//获取table
		var table=document.getElementById("familyTab")
		//获取定位的数据所在位置，注意i与实际的行数
		var tr=table.getElementsByTagName("tr")[i]
		//定位下拉框所在的单元格
		var rtd=tr.getElementsByTagName("td")[0]
		//获取下拉框的值
		var rval=rtd.getElementsByTagName("select")[0].value
		//定位性别所在的单元格
		var sextd=tr.getElementsByTagName("td")[1]
		if(rval=="父亲"){
			sextd.getElementsByTagName("input")[0].value="男"
		}else if(rval=="母亲"){
			
			sextd.getElementsByTagName("input")[0].value="女"
		}else{
			sextd.getElementsByTagName("input")[0].value=""
		}
	}

如果我们能够直接指导下拉框就不必这么麻烦（不要问为什么不直接给input附id，这当然可以，此处我只是记录我遇到的方法）

复制代码

<table cellspacing="1" cellpadding="0"  align="center" class="tab" BORDER=0 width="70%" style="border-collapse:separate;border-spacing:1;" id="familyTab">
        <caption>
        	家庭成员及主要社会关系
        </caption>
        <tr>
            <th width="15%" style="text-align:center;">关系</th>
            <th width="5%"  style="text-align:center;">性别</th>
        </tr>
<tr>
            <td align="center">
				<select name="Relationship1"  onchange="updateSex(1)">
					<option value="无" >无</option>
					<option value="父亲" >父亲</option>
					<option value="母亲" >母亲</option>
				</select>
			</td>
            <td align="center"><input type="text" name="Sex"  			class="learnvalue" value="aaa"  readonly="readonly"/></td>
        </tr>
        <tr>
            <td align="center">
				<select name="Relationship2"  onchange="updateSex(2)">
					<option value="无" >无</option>
					<option value="父亲" >父亲</option>
					<option value="母亲" >母亲</option>
				</select>
			</td>
            <td align="center"><input type="text" name="Sex"  			class="learnvalue" value=""  readonly="readonly"/></td>
        </tr>
    </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 <table cellspacing="1" cellpadding="0"  align="center" class="tab" BORDER=0 width="70%" style="border-collapse:separate;border-spacing:1;" id="familyTab">
        <caption>
        	家庭成员及主要社会关系
        </caption>
        <tr>
            <th width="15%" style="text-align:center;">关系</th>
            <th width="5%"  style="text-align:center;">性别</th>
        </tr>
<tr>
            <td align="center">
				<select name="Relationship1"  onchange="updateSex(1)">
					<option value="无" >无</option>
					<option value="父亲" >父亲</option>
					<option value="母亲" >母亲</option>
				</select>
			<!--<input type="hidden" name="Relationship"  	class="learnvalue" value="" />--></td>
            <td align="center"><input type="text" name="Sex"  			class="learnvalue" value="aaa"  readonly="readonly"/></td>
        </tr>
        <tr>
            <td align="center">
				<select name="Relationship2"  onchange="updateSex(2)">
					<option value="无" >无</option>
					<option value="父亲" >父亲</option>
					<option value="母亲" >母亲</option>
				</select>
			</td>
            <td align="center"><input type="text" name="Sex"  			class="learnvalue" value=""  readonly="readonly"/></td>
        </tr>
    </table>

对应的js方法如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	function updateSex(i){
		//定位下拉框
		var rtd=$("#Relationship"+i)
		//获取下拉框的值
		var rval=rtd[0].value
		//定位所在的tr
		var tr=rtd.parent().parent()
		//找到input所在td
		var sextd=tr.[0].children[1]
		if(rval=="父亲"){
			sextd.getElementsByTagName("input")[0].value="男"
		}else if(rval=="母亲"){
			
			sextd.getElementsByTagName("input")[0].value="女"
		}else{
			sextd.getElementsByTagName("input")[0].value=""
		}
	}