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

最新推荐文章于 2024-05-31 10:59:44 发布

AngelCathy

最新推荐文章于 2024-05-31 10:59:44 发布

阅读量221

点赞数

分类专栏： javascript 文章标签： JavaScript ViewUI

javascript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用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>