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

最新推荐文章于 2022-09-29 09:58:04 发布
最新推荐文章于 2022-09-29 09:58:04 发布
阅读量2k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： 获取表单数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bushanyantanzhe/article/details/83825844
版权

最近所做的项目需要取出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拿到所有表单的值_js获取form表单所有数据的简单方法
weixin_39822184的博客
01-27 2594
下面小编就为大家带来一篇js获取form表单所有数据的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧在HTML中用js获取通过GET、POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值。针对大家常用的获取表单方式，很多时候都是在重复的写一些代码，今天给大家贴出来的代码可以作为公用方法直接调用。可以提高大家的开发效率。Js代码//获取指定...
js简单获取表单中单选按钮值的方法
10-21
主要介绍了js简单获取表单中单选按钮值的方法,涉及javascript针对form表单元素的遍历与查找相关操作技巧,需要的朋友可以参考下
js获得表单中单选框的值
丶季末筅森的专栏
03-24 3130
学生性别：                男                 女                           function addStu(){  var stuname = document.getElementById("stuname").value;  var sex = document.myform.sex;  for(va
Jquery获取表单中的文本框的值
lyl16的专栏
06-13 1742
--------------------------------------------------- 获取文本框中的
js 获取单选按钮的值
Vincent
11-15 222
[code="js"] test_001.html function show_result() { for ( var i = 0; i < myform.show_type.length; i++) { if (myform.show_type[i].checked) { var return_value = ...
js获取table的行数与列数
不用去猜
10-16 1万+
var table =document.getElementById("tab1");  var rows = table.rows.length;  alert('行数'+rows);  var colums = table.rows[0].cells.length;  alert('列数'+colums); table相当于一个二维数组element类 Table{ ro
js实现不提交表单获取单选按钮值的方法
10-23
本篇文章将深入探讨如何使用JavaScript实现不提交表单就能获取单选按钮的值，以及涉及到的相关页面元素属性操作和鼠标事件。 首先，一个基本的HTML表单通常包含若干输入元素，如文本框、单选按钮等。单选按钮...
JS获取文本框,下拉框,单选框的值的简单实例
10-26
本文将详细介绍如何通过JavaScript获取文本框、下拉框和单选框的值，并提供简单实例。 1. **文本框（Text Input）** 在HTML中，文本框通常由`<input type="text">`定义。获取文本框的值，可以使用`getElementById...
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
12-10
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> &...
javascript实现的动态添加表单元素input,button等(appendChild)
10-30
以下将详细介绍如何使用JavaScript动态添加表单元素，特别是`input`和`button`，以及如何利用`appendChild`方法。 首先，我们需要了解`document.createElement`函数。这个函数用于在内存中创建一个新的HTML元素。...
点击单选按钮js获取出值
05-21
<script> $(function(){ $("input:radio").click(function () { //获取选中的radio的值 if($(this).attr("checked")){ var contactUserId = $(this).val(); alert(contactUserId ); } }); }); </script>
django表单中的按钮获取数据的实例分析
12-17
在Django框架中，表单是处理用户输入数据的核心组件，它们通过HTML元素如文本框、密码输入框、单选按钮、复选框、下拉框等收集用户数据。当用户提交表单时，这些数据通常通过HTTP的POST方法发送到服务器。下面将详细...
JS获取tabel每行td中的input元素的值
u010045996的专栏
10-24 1万+
tbody id="history_income_list">   tr>   td align="center">input type="text" class="input-s input-w input-hs">td>   td align="center">input type="text" class="input-s input-w input-hs">td>    5 td 
【HTML】js Table单击事件，获取表格行和列及单元格数值的方法
德仔
09-29 8767
【代码】[HTML]js Table单击事件，获取表格行和列及单元格数值的方法。
js获取单选按钮的值并传递值
kt1776133839的博客
10-13 2997
获取单选框的值有三种方式： 1、$('input:radio:checked').val()； 2、$("input[type='radio']:checked").val(); 3、$("input[name='rd']:checked").val(); js传递获取到的单选框的值： document.location.href ='URL?参数名=' + $('input:radio...
JS获取单选框选中的值
gaoshili001的专栏
07-31 5375
var secondaryCampus = $('input:radio[name="secondaryCampus"]:checked').val();
EL-Table获得选中的行
sinat_33384251的博客
03-12 1万+
在使用Element前端库时候,需要获得表格选中行的时候,elemnet手册里面没有写. 通过查看源码,发现有个store属性,保存了选中的行数据. 通过以下方法得到: "singleTable"/&gt; this.$refs.multipleTable.store.states.selection 未测试 ...
jq && js获取input的value值
热门推荐
而我想……成为一个有趣的妞
12-24 5万+
①var user_id = document.getElementById('user_id').value; ②var user_id = $('#user_id').val();
js title 单选框 获取_js简单获取表单中单选按钮值的方法
weixin_39610353的博客
12-19 121
本文实例讲述了js简单获取表单中单选按钮值的方法。分享给大家供大家参考，具体如下：HTML部分如下：bordercolor="#999999">回退类型:type="radio" name="returnTag" value="-1" checked="checked">申报部门type="radio" name="returnTag" value="1"> 省网招标中心type...
创建一个用于填写用户资料的表单，要求表单内包含文本框、单选按钮、复选框、下拉式列表框及文本区域，并在提交表单后通过表格显示所提交的信息
最新发布
06-08
好的，我可以为您提供一个基础的 HTML 表单代码，包含了您所要求的各种表单元素： ```html <!DOCTYPE html> <html> <head> <title>User Information Form</title> </head> <body> <h2>User Information Form</h2> <form action="submit.php" method="POST"> <label for="name">Name:</label> <input type="text" name="name" id="name" required><br><br> <label for="email">Email:</label> <input type="email" name="email" id="email" required><br><br> <label for="gender">Gender:</label><br> <input type="radio" name="gender" value="male" id="male"> <label for="male">Male</label><br> <input type="radio" name="gender" value="female" id="female"> <label for="female">Female</label><br><br> <label for="interests">Interests:</label><br> <input type="checkbox" name="interests[]" value="reading" id="reading"> <label for="reading">Reading</label><br> <input type="checkbox" name="interests[]" value="music" id="music"> <label for="music">Music</label><br> <input type="checkbox" name="interests[]" value="sports" id="sports"> <label for="sports">Sports</label><br><br> <label for="country">Country:</label> <select name="country" id="country"> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="uk">UK</option> <option value="australia">Australia</option> </select><br><br> <label for="message">Message:</label><br> <textarea name="message" id="message" rows="5" cols="40"></textarea><br><br> <input type="submit" value="Submit"> </form> </body> </html> ``` 这段代码会创建一个表单，包含了文本框、单选按钮、复选框、下拉式列表框以及文本区域，用户填写并提交表单后，表单数据会被发送到 `submit.php` 页面进行处理。您可以根据需要修改表单元素的名称、选项值、标签内容等。同时，您还需要创建 `submit.php` 页面，用于接收和处理表单数据，并将数据显示在表格中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值