<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script>
// Last updated 2006-02-21
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
//row.id="tr_"+ iteration;
row.setAttribute("id","tr_"+ iteration);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
// select cell
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
////alert(iteration);
sel.name = 'selRow' + iteration;
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
cellRightSel.appendChild(sel);
var cellRightSel = row.insertCell(3);
var sel = document.createElement('select');
sel.name = 'selRowd' + iteration;
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
cellRightSel.appendChild(sel);
}
function keyPressTest(e, obj)
{
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'TableAddRowNewWindow';
// submit
frm.submit();
}
function validateRow(frm)
{
var chkb = document.getElementById('chkValidate');
if (chkb.checked) {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length - 1;
var i;
for (i=1; i<=lastRow; i++) {
var aRow = document.getElementById('txtRow' + i);
if (aRow.value.length <= 0) {
alert('Row ' + i + ' is empty');
return;
}
}
}
openInNewWindow(frm);
}
function rowsTest(e, obj)
{
//var row = document.getElementById('tr_1');
//alert(row);
//var row2 = document.getElementById('txtRow1');
//alert(row2);
var tbl = document.getElementById('tblSample');
for(var i = tbl.rows.length-1; i >=0; i--)
{ alert(tbl.rows[i].id);}
}
</script>
</head>
<body>
<form id="form1" runat="server" action="Default.aspx" method="get">
<div>
<p>
<input type="button" value="读取id" onclick="rowsTest();" />
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
</p>
<p>
<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tblSample">
<tr>
<th colspan="3">Sample table</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="txtRow1"
id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" /></td>
<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
</select>
</td>
</tr>
<tr id="darenkuang18" >
<td height="30"><div align="center">
<input name="xingming18" class="input" id="xingming18" size="15" />
</div></td>
<td><div align="center">
<select class="input" size="1" name="xingbie18" id="xingbie18">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div></td>
<td><div align="center"> <input type="text" class="input" size="5" readonly value="" name="xiaohai18" id="xiaohai18">
</div></td>
<td><div align="center">
<select class="input" size="1" name="zhengjian18" id="zhengjian18">
<option value="身份证">身份证</option>
<option value="户口本">户口本</option>
<option value="出生证">出生证</option>
<option value="港澳通行证">港澳通行证</option>
<option value="护照">护照</option>
<option value="回乡证">回乡证</option>
</select>
</div></td>
<td><div align="center">
<input name="zjhm18" class="input" id="zjhm18" size="25" value="0"/>
</div></td>
<td><div align="center">
<textarea name="kebeizhu18" id="kebeizhu18" cols="28" rows="1" >无</textarea>
</div></td>
</tr>
</table>
</div>
</form>
</body>
</html>