1 <html> 2 <head> 3 </head> 4 <body> 5 <script language="javascript"> 6 function addRowToTable() { 7 var tbl = document.getElementById('tblSample'); 8 var lastRow = tbl.rows.length; 9 // if there's no header row in the table, then iteration = lastRow + 1 10 var iteration = lastRow; 11 var row = tbl.insertRow(lastRow);//添加行 12 // left cell 13 var cellLeft = row.insertCell(0); //添加列 14 var textNode = document.createTextNode(iteration); 15 cellLeft.appendChild(textNode); 16 // right cell 17 var cellRight = row.insertCell(1); 18 var el = document.createElement('input'); 19 el.type = 'text'; 20 el.name = 'txtRow' + iteration; 21 el.id = 'txtRow' + iteration; 22 el.size = 40; 23 el.onkeypress = keyPressTest; 24 cellRight.appendChild(el); 25 // select cell 26 var cellRightSel = row.insertCell(2); 27 var sel = document.createElement('select'); 28 sel.name = 'selRow' + iteration; 29 sel.options[0] = new Option('text zero', 'value0'); 30 sel.options[1] = new Option('text one', 'value1'); 31 cellRightSel.appendChild(sel); 32 } 33 function keyPressTest(e, obj) { 34 var validateChkb = document.getElementById('chkValidateOnKeyPress'); 35 if (validateChkb.checked) { 36 var displayObj = document.getElementById('spanOutput'); 37 var key; 38 if (window.event) { 39 key = window.event.keyCode; 40 } else if (e.which) { 41 key = e.which; 42 } 43 var objId; 44 if (obj != null) { 45 objId = obj.id; 46 } else { 47 objId = this.id; 48 } 49 displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key); 50 } 51 } 52 function removeRowFromTable() { 53 var tbl = document.getElementById('tblSample'); 54 var lastRow = tbl.rows.length; 55 if (lastRow > 2) 56 tbl.deleteRow(lastRow - 1); 57 } 58 function openInNewWindow(frm) { 59 // open a blank window 60 var aWindow = window 61 .open('', 'TableAddRowNewWindow', 62 'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400'); 63 // set the target to the blank window 64 frm.target = 'TableAddRowNewWindow'; 65 // submit 66 frm.submit(); 67 } 68 function validateRow(frm) { 69 var chkb = document.getElementById('chkValidate'); 70 if (chkb.checked) { 71 var tbl = document.getElementById('tblSample'); 72 var lastRow = tbl.rows.length - 1; 73 var i; 74 for (i = 1; i <= lastRow; i++) { 75 var aRow = document.getElementById('txtRow' + i); 76 if (aRow.value.length <= 0) { 77 alert('Row ' + i + ' is empty'); 78 return; 79 } 80 } 81 } 82 openInNewWindow(frm); 83 } 84 </script> 85 <form method="get" action=""> 86 <p> 87 <input type="button" value="添加" onclick="addRowToTable();" /> 88 <input type="button" value="删除" onclick="removeRowFromTable();" /> 89 <input type="button" value="提交" onclick="validateRow(this.form);" /> 90 <input type="checkbox" id="chkValidate" /> Validate Submit 91 </p> 92 <table border="1" id="tblSample"> 93 <tr> 94 <th colspan="3">添加选项</th> 95 </tr> 96 <tr> 97 <td>1</td> 98 <td><input type="text" name="txtRow1" id="txtRow1" size="40" /></td> 99 <td> 100 <select name="selRow0"> 101 <option value="value0">text zero</option> 102 <option value="value1">text one</option> 103 </select></td> 104 </tr> 105 </table> 106 </body> 107 </html>
改成可以增加试题的表单,第一行题干,第二行ABCD选项,第三行正确答案;对这块不是很明白,又比较急只能求各位大神帮忙了,谢谢了
大概就是这个样子 具体的css样式 懒得调了 自己该把
<html>
<head>
</head>
<body>
<script language="javascript">
function addRowToTable() {
var tbl = document.getElementById('tblSample');
var lastRow2 = tbl.rows.length;
var iteration2 = lastRow2;
var row2 = tbl.insertRow(lastRow2);//添加行2
var cellLeft2 = row2.insertCell(0); //添加列
var textNode2 = document.createTextNode(iteration2);
cellLeft2.appendChild(textNode2);
var cellRight2 = row2.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'txtRow' + iteration2;
el2.id = 'txtRow' + iteration2;
el2.size = 40;
el2.value ='提干';
el2.onkeypress = keyPressTest;
cellRight2.appendChild(el2);
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);//添加行
// left cell
var cellLeft = row.insertCell(0); //添加列
// 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.value ='A B C D';
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
var lastRow3= tbl.rows.length;
var iteration3 = lastRow3;
var row3 = tbl.insertRow(lastRow3);//添加行3
var cellLeft3 = row3.insertCell(0); //添加列
var cellRight3 = row3.insertCell(1);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtRow' + iteration3;
el3.id = 'txtRow' + iteration3;
el3.size = 40;
el3.value ='答案';
el3.onkeypress = keyPressTest;
cellRight3.appendChild(el3);
}
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);
}
</script>
<form method="get" action="">
<p>
<input type="button" value="添加" onclick="addRowToTable();" />
<input type="button" value="删除" onclick="removeRowFromTable();" />
<input type="button" value="提交" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
</p>
<table border="1" id="tblSample">
<tr>
<th colspan="3">添加选项</th>
</tr>
<tr>
<td >1</td>
<td >提干</td>
<td ></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="txtRow1" id="txtRow1" size="40" value="A B C D"/></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="text" name="txtRow1" id="txtRow1" size="40" value="答案"/>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>