如何在html 页面插入一个表格,参数的传递,
作者:互联网
1首先在HTML页面插入一个表格
姓名 | 证件类型 | 证件号码 | 编辑 |
---|---|---|---|
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);
}
}
标签:function,jQuery,表格,innerHTML,html,parentNode,var,data,页面 来源: https://www.cnblogs.com/pdxt666/p/14200049.html