分别获取在同一页面下两个动态生成的table的单选框值和textarea 文本框值

<tr>
	<td colspan="6">
		<table class="table table-striped table-bordered table-hover" id="contenttable">
			<thead  align="center" style="font-weight: bold;">
				<tr>
					<td width="100px">设备类别</td>
					<td width="150px">评价项目</td>
					<td width="350px">验收细则</td>
					<td width="200px">选项</td>
					<td>说明</td>
				</tr>
			</thead>
		    <tbody id="esatable"></tbody>
		</table>
	</td>
</tr>
<tr>
	<td colspan="6">
		<select id="categorya" name="categorya" style="width: 200px" class="select"                     onchange="showtable()">
			<option value="-1" selected>--其他设备类别--</option>
			<option value="0">下拉单选项一</option>
			<option value="1">下拉单选项二</option>
			<option value="2">下拉单选项三</option>
			<option value="3">下拉单选项四</option>
		</select>
	<table  class="table table-striped table-bordered table-hover" id="esatablebshow">
        <tbody  id="esatableb"></tbody>
	</table>
    </td>
</tr>
//动态生成表1

function selectEsaInfo() {
    		var id = 1;
			$.ajax({
	      		type: "post",
	      		url: "../esa/tableShow.cyl",
	      		data: {
	      			category_id : id
	      		},
	      		dataType: "json",
	      		success: function(data){
	      			var data = data.esaList;
	      			var html = "";
	      				html += "<tr><td rowspan='"+ data.length +"' align='center' >";
	      			for (var i = 0; i < data.length; i++) {
	      				html += ""+ data[i].esa_category+"</td>";
						html += "<td align='center'>"+ data[i].esa_project +"</td>"
		      			html += "<td>"+ data[i].esa_regulations +"</td>"
		   				html += "<td align='center'>"
		   				html += "<input type='radio' dc='facilities' di='"+ data[i].id +"' name='facilities"+ data[i].id +"' value='0'/>符合"
						html += "<input type='radio' di='"+ data[i].id +"' name='facilities"+ data[i].id +"' value='1'/>不符合"
						html += "<input type='radio' di='"+ data[i].id +"' name='facilities"+ data[i].id +"' value='2'/>不适用</td>"
						html += "<td  align='center'>"
						html += "<textarea  name='txa' dva='"+ data[i].id +"' style='border: none;width: 200px;height:40px;'></textarea>"
						html += "</td></tr>"
					}
	      			$("#esatable").html(html);
	      			mergeCell("esatable",1,data.length,0);
	      		},
	      		error: function(){
	      			
	      		}
	   		});
		}


//动态生成表2
function showtable(){
	    	var categorya = $("#categorya").val();
	    	if (categorya == -1) {
				return;
			}
			$.ajax({
	      		type: "post",
	      		url: "../esa/tableShow.cyl",
	      		data: {
	      			category_id : categorya
	      		},
	      		dataType: "json",
	      		success: function(data){
	      			var data = data.esaList;
	      			var html = "";
	      				html += "<tr><td rowspan='"+ data.length +"' align='center' width='100px'>";
	      			for (var i = 0; i < data.length; i++) {
	      				html += ""+ data[i].esa_category+"</td>";
		      			html += "<td width='500px'>"+ data[i].esa_regulations +"</td>"
		      			html += "<td align='center'>"
		   				html += "<input type='radio' dc='machine' di='"+ data[i].id + "' name='machine"+ data[i].id +"' value='0'/>符合"
						html += "<input type='radio' di='"+ data[i].id + "' name='machine"+ data[i].id +"' value='1'/>不符合"
						html += "<input type='radio'  di='"+ data[i].id + "' name='machine"+ data[i].id +"' value='2'/>不适用</td>"
						html += "<td  align='center'>"
						html += "<textarea name='txs' dv='"+ data[i].id +"' style='border: none;width: 200px;height:40px;'></textarea></td>"
						html += "</tr>"
					}
	      			$("#esatableb").html(html);
	      		},
	      		error: function(){
	      			
	      		}
	   		});
	    }


//取各表的rodio值与文本框值
function detmecSave() {      
            //获取第一个table里的rodio
	    	var rds = $("input[dc='facilities']");
	    	var option = {};
	    	for (var i = 0; i < rds.length; i++) {
	    		var id = rds[i].getAttribute("di");
	    		var name = rds[i].getAttribute("name");
	    		var value = $("input[name='" + name + "']:checked").val();
	    		option[id] = (value == undefined ? null : value);
			}
	    	console.log(option);
	    	
	    	//获取第一个table里的textarea 
	    	var textt = $("textarea[name='txa']");
	    	var explaina = {};
	    	for(var i = 0; i < textt.length; i++) {
	    		var id = textt[i].getAttribute("dva");
	    		var value = textt[i].value;
	    		explaina[id] = value;
	    	}
	    	//console.log(explaina);
	    	
	    	//获取第二个table里的rodio
	    	var rdsa = $("input[dc='machine']");
	    	var optiona = {};
	    	for (var i = 0; i < rdsa.length; i++) {
	    		var id = rdsa[i].getAttribute("di");
	    		var name = rdsa[i].getAttribute("name");
	    		var value = $("input[name='" + name + "']:checked").val();
	    		optiona[id] = (value == undefined ? null : value);
			}
	    	console.log(optiona);
	    	//获取第二个table里的textarea 
	    	var textts = $("textarea[name='txs']");
	    	var tett = {};
	    	for(var i = 0; i < textts.length; i++) {
	    		var id = textts[i].getAttribute("dv");
	    		var value = textts[i].value;
	    		tett[id] = value;
	    	}
	    	//console.log(tett);
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个比较常见的网页表单需求,我可以帮你解决这个问题。首先,我们需要使用HTML和CSS来创建表单,然后使用JavaScript来验证和提交表单数据。以下是一个简单的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户资料表单</title> <style> label { display: block; margin-bottom: 10px; } input[type=text], select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 20px; } input[type=radio], input[type=checkbox] { margin-right: 10px; } button { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } </style> </head> <body> <h2>请填写您的用户资料</h2> <form id="userForm"> <label for="name">姓名:</label> <input type="text" id="name" name="name" placeholder="请输入您的姓名" required> <label for="gender">性别:</label> <input type="radio" id="male" name="gender" value="male" required> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> <label for="hobby">爱好:</label> <input type="checkbox" id="football" name="hobby" value="football"> <label for="football">足球</label> <input type="checkbox" id="basketball" name="hobby" value="basketball"> <label for="basketball">篮球</label> <input type="checkbox" id="reading" name="hobby" value="reading"> <label for="reading">阅读</label> <label for="city">所在城市:</label> <select id="city" name="city" required> <option value="">请选择所在城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> <label for="description">个人描述:</label> <textarea id="description" name="description" placeholder="请输入个人描述"></textarea> <button type="submit">提交</button> </form> <div id="userInfo"></div> <script> var form = document.getElementById("userForm"); var userInfo = document.getElementById("userInfo"); form.addEventListener("submit", function(event) { event.preventDefault(); var name = document.getElementById("name").value; var gender = document.querySelector('input[name="gender"]:checked').value; var hobby = []; var hobbyInputs = document.getElementsByName("hobby"); for (var i = 0; i < hobbyInputs.length; i++) { if (hobbyInputs[i].checked) { hobby.push(hobbyInputs[i].value); } } var city = document.getElementById("city").value; var description = document.getElementById("description").value; var table = "<table><tr><th>姓名</th><th>性别</th><th>爱好</th><th>所在城市</th><th>个人描述</th></tr>"; table += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + hobby.join(", ") + "</td><td>" + city + "</td><td>" + description + "</td></tr>"; table += "</table>"; userInfo.innerHTML = table; }); </script> </body> </html> ``` 在这个示例,我们使用了HTML和CSS来创建表单,包括文本框、单选按钮、复选、下拉式列表及文本区域。我们还使用了JavaScript来验证和提交表单数据。在提交表单时,我们使用了一个事件监听器来捕获表单的提交事件,并且阻止表单的默认行为。然后,我们使用JavaScript获取表单,并将其显示在一个表格,这个表格是通过JavaScript动态生成的。 希望这个示例能够帮助你解决问题!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值