javascript动态填写table中的行和列(1.3)这个很有意思哦

本文介绍了一个使用JavaScript实现的动态创建表格的挑战案例。用户可以输入指定数量的单元格,并选择不同的输入类型如文本、单选、复选等。该案例通过添加按钮触发函数,实现了表格的动态生成与展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >




<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值