table点击行取值

最新推荐文章于 2023-12-19 21:45:00 发布

原创最新推荐文章于 2023-12-19 21:45:00 发布 · 562 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript动态生成表格的方法，并实现了点击行时改变背景颜色的功能。此外，还展示了如何通过AJAX请求更新选中行的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态表格

function gridShow(msg) {
	msgs = msg.root;   //生成msgs 数组对象
	//进行表头生成。
	var tables = "<table class='table' id=\"grid_data\" width=\"60%\"><tr class=\"titile\" height=\"30\"><th style=\"display:none\">序号</th><th align='center' >用户代码</th><th align='center' >用户名称</th><th align='center'>所属单位</th></tr>";
	//进行表格生成。msgs.length
	for (var i = 0; i < msgs.length; i++) {
		tables = tables + "<tr height=\"20\"  onclick=\"click_set_color(this)\" style=\"cursor:hand\"><td style=\"display:none\">" + i + "</td><td>" + msgs[i].oper_id + "</td><td>" + msgs[i].user_name + "</td><td>" + msgs[i].dwmc + "</td></tr>";
	}
	tables = tables + "</table>";
	var divs = get("grid_content");
	divs.innerHTML = tables;
}

点击行改变其颜色

function click_set_color(obj) {
	obj.style.background = "#E0E0E0";
	if (selectedTr != null) {
		selectedTr.style.removeAttribute("backgroundColor");
	}
	if (selectedTr == obj) {
		selectedTr = null;
	} else {
		selectedTr = obj;
		tr_set_text_value();
	}
}

取行值

function tr_set_text_value() {
	if (selectedTr != null) {
		var userrole = "";
		var i = selectedTr.childNodes[0].innerText; ///取得行号。。跟据行号进行赋值。
		$.ajax({type:"POST",async:false,url:"userRole.do?op=queryuserrole&oper_id="+msgs[i].oper_id, dataType:"json", success:function (rolemsg) {
			var rolemsg = rolemsg.root;   //生成msgs 数组对象
			var roles=$("#role input");
			roles.attr("checked",false);	
			for(var i=0;i<rolemsg.length;i++){
				roles.each(function () { 
					if ($(this).val()==rolemsg[i].role_id) {
				  		$(this).attr("checked",true); 
				  	}
				});
			}
		}});
		get("oper_id").value = msgs[i].oper_id;
		//get("role_id").value = msgs[i].role_id;
		get("oper_id_s").value = msgs[i].oper_id;
		//get("role_id_s").value = msgs[i].role_id;
	} else {
		alert("请选择一条数据!");
	}
}