如何在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);

		}
	}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM