js获取表单各行各列的值,包括input文本框和单选按钮

最新推荐文章于 2024-02-27 14:46:01 发布

不善言谈者

最新推荐文章于 2024-02-27 14:46:01 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签：获取表单数据

本文链接：https://blog.csdn.net/bushanyantanzhe/article/details/83825844

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

最近所做的项目需要取出table中各行各列的数据进行操作,因为一些原因,没有找到什么好方法,只能用js来操作.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function show() {
				var tab = document.getElementById("test");
				//表格行对象
				var rows = tab.rows;
				for(var i = 1; i < rows.length; i++) { //遍历表格的行
					for(var j = 0; j < rows[i].cells.length; j++) { //遍历每行的列

						
						if(j == 0) {
							var obj = rows[i].cells[j].getElementsByTagName("INPUT") //获取单选框的值
							for(var z = 0; z < obj.length; z++) {
								if(obj[z].checked) {
									//alert("单选 z=" + z + "i=" + i + "j=" + j + ":" + obj[z].value);
									alert("第" + (i + 1) + "行，第" + (j + 1) + "列的值是:" + obj[z].value);
								}
							}
						}else if(j==3){
							//innerHTML
							alert("第" + (i + 1) + "行，第" + (j + 1) + "列的值是:" + rows[i].cells[j].innerHTML);
						}else{
							alert("第" + (i + 1) + "行，第" + (j + 1) + "列的值是:" + rows[i].cells[j].getElementsByTagName("INPUT")[0].value);
						}
					}

				}
				
			}
		</script>
	</head>

	<body>
		<table id="test" border="1">
			<tr>
				<td>性别</td>
				<td>姓名</td>
				<td>年纪</td>
				<td>评语</td>
			</tr>
			<tr>
				<td>
					<input type="radio" name="radio" value="是" />是&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="radio" value="否" />否&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="radio" value="免" />免
				</td>
				<td><input type="text" /></td>
				<td><input type="text" /></td>
				<td>成绩优良</td>
			</tr>
		</table>
		<input type="button" onclick="show();" value="查看" />

	</body>

</html>

不善言谈者

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js获取表单各行各列的值,包括input文本框和单选按钮

最近所做的项目需要取出table中各行各列的数据进行操作,因为一些原因,没有找到什么好方法,只能用js来操作.&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="tex
复制链接

扫一扫

专栏目录