dynamictable.html

来自「js的源码初学js的一些小例子」· HTML 代码 · 共 67 行

HTML

67 行

<html>

<script language="javascript">

function addInput(){
grid=document.getElementById("list");

var newRow=grid.insertRow();
newRow.id=grid.rows.length;
if (parseInt(newRow.id) > 2){
  var seq = document.getElementsByName("nubmer");
  if (seq!=null && seq.length>0){
	for (var i = 0 ;i< seq.length;i++){
	  seq[i].value=i+1;
	} 
  } 		 	
}
td=newRow.insertCell();
td.innerHTML="<input type='text' value='"+(newRow.id-1)+"' name='nubmer' size='2' readonly/>";

td=newRow.insertCell();
td.innerHTML="dfsdfsdf";

td=newRow.insertCell();
td.innerHTML="<input type='text' name='userSex'/>";

td=newRow.insertCell();
td.innerHTML="<input type='text' name='userAge'/>";

td=newRow.insertCell();
td.innerHTML="<input type='button' id='"+newRow.id+"' value='删除' onclick='delInput(this.id)'/>";
}

function delInput(id){
if(confirm("确定删除此行吗？")){
  grid=document.getElementById("list");
  seqs = document.getElementsByName("nubmer");	
  for(var i = 0; i < grid.rows.length; i++){
	if(grid.rows[i].id == id){
	  grid.deleteRow(i);
		
	  for (var iseq = i-1; iseq <seqs.length;iseq++){
		seqs[iseq].value = (parseInt(seqs[iseq].value)-1);
	  }
	  break;
	}
  }
}
}
</script>

<body>

  <table id="list" width="100%" border="1" bordercolor="#000000">
    <CAPTION>
	<b>动态表格</b><input type="button" id="addRow" name="addRow" value="新增" onClick="addInput()">
	</CAPTION>
    <th bgcolor="#CCCCCC">序号</th>
    <th bgcolor="#CCCCCC">用户名</th>
    <th bgcolor="#CCCCCC">用户性别</th>
    <th bgcolor="#CCCCCC">用户年龄</th>
	<th bgcolor="#CCCCCC">删除</th>
  </table>

</body>

</html>

dynamictable.html - 源码说明

本页面展示了「js的源码初学js的一些小例子」中的 dynamictable.html 源码文件，采用 HTML 编程语言编写，共 67 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C

搜索代码Ctrl + F

全屏模式F11

增大字号Ctrl + =

减小字号Ctrl + -

显示快捷键?