动态处理html表格

最新推荐文章于 2023-01-19 18:01:38 发布

swenker

最新推荐文章于 2023-01-19 18:01:38 发布

阅读量1.4k

点赞数

文章标签： html function input table insert button

本文链接：https://blog.csdn.net/swenker/article/details/1651376

版权

应用场景：
很多时候，在页面填写表格是，想一行一行的填写，但是事先是不知道会有多少行的，有几种可用的方法
1、需要填写一行时，弹出新的页面，填写一行数据完毕，保存后，然后才能继续填写下一行。
   缺点：每填写一行，就需要保存一次数据，增加交互。
2、在同一个页面显示可能填写数据行数的最大行数，能填写多少行就填写多少行，直到填写满位置。所有数据填写完毕，保存数据即可。
   缺点：数据结构会有冗余，属于比较蹩脚的设计。
3、在页面上，当需要填写一行数据时，在页面显示一行数据录入区域。随着需要而增加。所有数据填写完毕，保存数据即可。
    这正式本次要进行描述的实现方式。
这个演示例子很简单，只需要创建一个html文件即可。其功能是在页面上动态显示文件浏览框。

以下是文件内容：

<html>
<head>
<title>动态行测试</title>
<script language="JavaScript" type="text/JavaScript">

var rowcounter = 0;

var tbl;
function insert(){
tbl=document.getElementById('dynamic_result');
var row = tbl.insertRow();

row.id=rowcounter;
//row.className=linestyle;

cell = row.insertCell();
cell.align = 'center';

//cell.className=linestyle;
cell.innerHTML="<input type=text size=30 name=file"+rowcounter+"> <input type=button name=bdelAtt value=删除 οnclick=delAtt('"+rowcounter+"')>";

rowcounter++;

}

function delRow(rowid){

    var count = tbl.rows.length;
for (i = 0; i < count; i++) {
  if (rowid == tbl.rows(i).id){
   tbl.deleteRow(i);
            rowcounter--;
            return;
  }
}
}

function delAll(){
var count = tbl.rows.length;
for (i=0;i<count;i++){
tbl.deleteRow(i);
}
}

function insertData(){
insert();
}

function addAtt(){
insertData();
document.forms[0].kc.value=rowcounter;
}

function delAtt(rowid){
delRow(rowid);
document.forms[0].kc.value=rowcounter;
}
</script>

</head>
<body>
<form action="dytest.jsp">

<input type="hidden" name="kc">

<table border="1" id="dynamic_result">

</table>
</form>

不难看出，其原理就是利用dhtml语言，动态拼写table的内容区域。

由此原理，我们自然也可以动态拼装其他的有些页面元素。

swenker

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态处理html表格

应用场景：很多时候，在页面填写表格是，想一行一行的填写，但是事先是不知道会有多少行的，有几种可用的方法1、需要填写一行时，弹出新的页面，填写一行数据完毕，保存后，然后才能继续填写下一行。缺点：每填写一行，就需要保存一次数据，增加交互。2、在同一个页面显示可能填写数据行数的最大行数，能填写多少行就填写多少行，直到填写满位置。所有数据填写完毕，保存数据即可。缺点：数据结构会有冗余，属于比较
复制链接

扫一扫