用js实现动态添加表格数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js实现动态添加表格数据相关的知识，希望对你有一定的参考价值。
1、在页面div中事先创建一个空白表格，可以根据需求而定。
2、表格创建好后，我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用。
3、在<tb>标签中我们添加了<input>标签，主要是用来提供用户输入参数， 而全局变量num，主要是用来区分每一个添加的参数的id的唯一性而存在的。
4、获得表格中的数据。
5、拿到表格中的数据后，我们根据它值的形式把它转换成json格式的数据。
<tablewidth="600"border="1"cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbodyid="tbMain"></tbody>
</table>
<scripttype="text/javascript">
//模拟一段JSON数据，实际要从数据库中读取
varper=[
id:001,name:'张珊',job:'学生',
id:002,name:'李斯',job:'教师',
id:003,name:'王武',job:'经理'
];
window.onload=function()
vartbody=document.getElementById('tbMain');
for(vari=0;i<per.length;i++)//遍历一下json数据
vartrow=getDataRow(per[i]);//定义一个方法,返回tr数据
tbody.appendChild(trow);
functiongetDataRow(h)
varrow=document.createElement('tr');//创建行
varidCell=document.createElement('td');//创建第一列id
idCell.innerHTML=h.id;//填充数据
row.appendChild(idCell);//加入行，下面类似
varnameCell=document.createElement('td');//创建第二列name
nameCell.innerHTML=h.name;
row.appendChild(nameCell);
varjobCell=document.createElement('td');//创建第三列job
jobCell.innerHTML=h.job;
row.appendChild(jobCell);
//到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮
vardelCell=document.createElement('td');//创建第四列，操作列
row.appendChild(delCell);
varbtnDel=document.createElement('input');//创建一个input控件
btnDel.setAttribute('type','button');//type="button"
btnDel.setAttribute('value','删除');
//删除操作
btnDel.οnclick=function()
if(confirm("确定删除这一行嘛？"))
//找到按钮所在行的节点，然后删掉这一行
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
//btnDel-td-tr-tbody-删除(tr)
//刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除
delCell.appendChild(btnDel);//把删除按钮加入td，别忘了
returnrow;//返回tr数据
</script>
扩展资料
js动态创建表格
vartab=document.createElement("table");
tab.border="1px";
document.body.appendChild(tab);
for(vari=0;i<3;i++)
vartr=document.createElement("tr");
for(varj=0;j<3;j++)
vartd=document.createElement("td");
td.innerHTML=Math.round(Math.random()*9);
tr.appendChild(td);
tab.appendChild(tr);
vardel=document.createElement("td");
del.innerHTML="删除";
tr.appendChild(del);
del.onclick=function()
this.parentNode.remove();
参考技术B <!DOCTYPE HTML><html>
<head>
<meta charset=UTF-8>
<title>table</title>
<style>
table
margin:auto;
width: 60%;
border: 1px solid black;
border-collapse: collapse;
table caption
color: blue;
font: 34px consolas bold;
table th, table td
border: 1px solid black;
text-align:center;
table th
font: 20px consolas bold;
background-color: gray;
table tr:nth-child(n+2)
background-color: cyan;
table tr:nth-child(2n+2)
background-color: red;
</style>
<script>
var data = [
id: "001", fullname: "张三", sex: "男", score: [98,33,48],
id: "002", fullname: "李四", sex: "w", score: [11,22,33],
id: "003", fullname: "kyo", sex: "m", score: [22,33,55],
id: "004", fullname: "yamazaki", sex: "w", score: [99, 100, 80]
];
var Student = function (id, fullname, sex, score)
this.id = id;
this.fullname = fullname;
this.sex = sex;
this.score = score;
var Score = function (chinese, math, english)
this.chinese = chinese;
this.math = math;
this.english = english;
var students = [];
for (var i = 0; i < data.length; i++)
var d = data[i];
var s = d["score"];
students.push(new Student (d["id"], d["fullname"], d["sex"], new Score(s[0], s[1], s[2])));
onload = function ()
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
var caption = table.createCaption();
caption.innerHTML = "学生成绩表";
var tr = tbody.insertRow (0);
var str = "学号,姓名,性别,语文,数学,英语".split(",");
for (var i = 0; i < str.length; i++)
var th = document.createElement("th");
th.innerHTML = str[i];
tr.appendChild (th);
for (var i = 0; i < students.length; i++)
var tr = tbody.insertRow (tbody.rows.length);
var obj = students[i];
for (var p in obj)
var op = obj[p];
if (p != "score")
var td = tr.insertCell (tr.cells.length);
td.innerHTML = op;
else
for (var p in op)
var td = tr.insertCell (tr.cells.length);
td.innerHTML = op[p];
document.body.appendChild(table);
</script>
<body>
</body>
</html>追问
自己做出来了，还是很感谢你啦
本回答被提问者采纳怎么用JAVA动态生成一个表格 ？从数据库读出数据 然后用JSP页面显示出来 形成一个表格
放在循环里面，然后在循环体里面画<table>,<tr>,<td>就行了，这是很久以前学java时写的jsp页面里的一段，里面加了分页什么的。你仔细想想吧，这个很好理解的。<table width="600" border="0" cellpadding="0" cellspacing="0" bordercolor="#96A353">
<tr>
<th colspan="2"><%=newDao.getnewsClassNameById(classid) %></th>
</tr>
<tr>
<td height="10" colspan="2"></td>
</tr>
<tr>
<td colspan="2"><hr color="#006600"></td>
</tr>
<%
for(int i=currPageBegin;i<intPage*intPageSize&&i<list.size();i++)
News news=(News)list.get(i);
%>
<tr>
<td><img src="Images/icon.gif"><a href="show_newscontent.jsp?newsid=<%=news.getNewsId() %>"><%=news.getNewsSubject() %></a></td>
<td width="100"><%=news.getNewsTime() %></td>
</tr>
<% %>
</table> 参考技术A Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
//2得到连接
Connection ct=DriverManager.getConnection("jdbc:sqlserver://localhost:1433;DatabaseName=ls","sa","123");
//3创建Statement
Statement sm=ct.createStatement();
//4查询
ResultSet rs=sm.executeQuery("select count(*) from login");
while(rs.next())
rowCount=rs.getInt(1);
if(rowCount%pageSize==0)
pageCount=rowCount/pageSize;
else
pageCount=rowCount/pageSize+1;
//查询出显示的记录
rs=sm.executeQuery("select top "+pageSize+" * from login where userId not in(select top "+pageSize*(pageNow-1)+" userId from login)");
%>
<center>
<table border="1" algin="center">
<tr><td>用户Id</td><td>用户名</td><td>用户密码</td><td>操作</td></tr>
<%
while(rs.next())
%>
<tr><td><%=rs.getString(1) %></td><td><%=rs.getString(2) %></td><td><%=rs.getString(3) %></td><td><a href="Update.jsp?id=<%=rs.getString(1) %>">修改</a>|<a href="del.jsp?id=<%=rs.getString(1) %>">删除</a></td></tr>
<%
%>
</table> 参考技术B 用jdbc连接 参考技术C 你是新手
以上是关于用js实现动态添加表格数据的主要内容，如果未能解决你的问题，请参考以下文章