• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
山城小跳
博客园    首页    新随笔    联系   管理    订阅  订阅

如何在html 页面插入一个表格,参数的传递,

1首先在HTML页面插入一个表格

姓名 证件类型 证件号码 编辑
js代码 function $(eleStr){ switch(eleStr.substr(0,1)){ case "#": return document.getElementById(eleStr.substr(1)); break; case ".": return document.getElementsByClassName(eleStr.substr(1)); break; case "_": return document.getElementsByName(eleStr.substr(1)); break; default: return document.getElementsByTagName(eleStr); break; } }
	onload = function(){

		doOperator();
	}

	function doOperator(){

		var updates =$(".update");
		var dels =$(".del");
		for (var i = 0; i < dels.length; i++) {
			dels[i].onclick =   function(){
				if(confirm("是否确定删除?")){  //提示是否删除
					//var row = this.parentNode.parentNode; //取到tr对象
					//row.parentNode.removeChild(row);  //移除tr
					$("#stuRecordTable").deleteRow(this.parentNode.parentNode.rowIndex);
				}
			}
			updates[i].onclick = function(){
				var operatorCell = this.parentNode.parentNode.getElementsByTagName("td")[1]; //取到要操作的td对象
				//1.修改按钮上有两个功能:修改,确定修改
				if(this.value == "修改"){
					this.value = "确定";
					operatorCell.innerHTML ="<input value='"+operatorCell.innerHTML+"'/>";//把内容变成文本框
					//做修改操作
				}else{
					operatorCell.innerHTML =operatorCell.getElementsByTagName("input")[0].value;//把文本框变成内容
					this.value = "修改";
					//做确定修改
				}
			}
		}
	}

	function addRow(){
		var rs = $("#stuRecordTable").rows;  //table取到所有的行
		var insertR = $("#stuRecordTable").insertRow(rs.length-1); //给表格添加一行(不包单元格)
		//insertR.innerHTML = rs[1].innerHTML;
		var c1 = insertR.insertCell(0);
		c1.innerHTML = '<input    type="text" name="coownerName" id="coownerName"  data-bv-notempty="true" data-bv-notempty-message="共有产权人 不能为空">';
		var c1 = insertR.insertCell(1);
		c1.innerHTML = '<input    type="text" name="credentialstype" id="credentialstype"  data-bv-notempty="true" data-bv-notempty-message="证件类型 不能为空">';
		var c1 = insertR.insertCell(2);
		c1.innerHTML = '<input    type="text" name="certificatesNum" id="certificatesNum"  data-bv-notempty="true" data-bv-notempty-message="证件类型 不能为空">';
		var c3 = insertR.insertCell(3);
		c3.innerHTML ='<input type="button" value="删除" class="del"/><input type="button" value="修改" class="update"/>';

		doOperator();

		var cs = rs[1].cells; //取到当前行的所有单元格
		//alert(cs[1].innerHTML);
	}

表格样式:

//封装数据
function get_table_data() {
var tr=jQuery("#stuRecordTable.tr")
var result=[];
for (var i = 2; i < tr.length; i++) {
var tds=jQuery(tr[i]).find("td");
if(tds.length>0){
result.push({'coownerName':jQuery(tds[0]).innerHTML,'certificatesNum':jQuery(tds[1]).innerHTML,'certificatesNum':jQuery(tds[1]).innerHTML});
}

		}

	}
	var result=get_table_data();
	jQuery("#hidTD").val(JSON.stringify(result));

//显示数据
//显示数据
function showData(data) {
var str = "";//定义用于拼接的字符串
for (var i = 0; i < data.length; i++){
// 拼接表格的行和列
str = "" +
"" + data[i].coownerName + "" +
"" + data[i].credentialstype + "" +
"" + data[i].certificatesNum+ "" +
"" + ''+ "" +
"";
//追加到table中
jQuery("#stuRecordTable").append(str);

		}
	}
posted @ 2020-12-28 09:26  字母一哥  阅读(1111)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3