<html>
<head>
<title>挑战javascript难度3</title>
<script language="javascript">
var cellCounts = 1;
function makeDynamicTable(){
var count = document.getElementById("addCounter").value;
if(count==0){
alert("请填写一个数字作为参数");
return false;
}
var tableRows = t1.rows.length;
var tr1 = t1.insertRow(tableRows);
for(var i = 0 ; i<count; i++){
var td1 = tr1.insertCell();
td1.innerHTML = '<input type="text" id="cell'+cellCounts+'" />';
if(i<count-1){
cellCounts++;
}
}
alert("请在输入框中填写要显示的符号");
/*type : text radio select checkbox password button */
}
function dynamicView(){
var tr1 = t1.insertRow(1);
for(var i = 1 ; i<cellCounts+1; i++){
var cellValue = document.getElementById("cell"+i).value;
if(cellValue=='radio'){
var td1 = tr1.insertCell();
td1.innerHTML = '<input type="radio" />'
}else if(cellValue=='text' ||cellValue==''){
var td2 = tr1.insertCell();
td2.innerHTML = '<input type="text"/>';
}else if(cellValue=='select'){
var td3 = tr1.insertCell();
td3.innerHTML = '<select></select>';
}else if(cellValue=='checkbox'){
var td3 = tr1.insertCell();
td3.innerHTML = '<input type="checkbox"/>';
}else if(cellValue=='password'){
var td4 = tr1.insertCell();
td4.innerHTML = '<input type="password"/>';
}else if(cellValue=='textarea'){
var td5 = tr1.insertCell();
td5.innerHTML = '<input type="textarea"/>';
}else {
var td6 = tr1.insertCell();
td6.innerHTML = '<input type="text" style="background-color:red" value='+cellValue+'>';
}
}
}
</script>
</head>
<body>
<div align="center">
<br><br>
<font color="blue">动态制作表格挑战难度3</font>
<br><br>
<form id="f1" >
<table id="t1">
<input type="text" name="addCounter" id = "addCounter"/>
<input type="button" value="添 加" onClick="makeDynamicTable()"/>
<input type="button" value="提 交" onclick="dynamicView()"/>
</table>
</form>
</div>
</body>
</html>