如何给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>
			<!--<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

	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>
			<!--<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方法如下

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

最后

以上就是大胆小海豚为你收集整理的如何给table里的input赋值的全部内容，希望文章能够帮你解决如何给table里的input赋值所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。