js中点一个按钮table中自己增加一行

woaixiaofeng1314 2011-07-22 11:30:31
<html>
<head>
<title>员工详细信息</title>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">

<script>
<!--
function doAddEmp() {
//opener.document.write("--------------------");

var empListTable = opener.document.getElementById("empListTable");

//alert(empListTable.rows.length);

var tr = empListTable.insertRow(-1);

var tdEmpNo = tr.insertCell(-1);
var tdEmpName = tr.insertCell(-1);
var tdJob = tr.insertCell(-1);
var tdMgr = tr.insertCell(-1);
var tdSal = tr.insertCell(-1);
var tdComm = tr.insertCell(-1);
var tdDeptName = tr.insertCell(-1);

tdEmpNo.innerHTML = document.forms[0].empNo.value;
tdEmpName.innerHTML = document.forms[0].empName.value;
tdJob.innerHTML = document.forms[0].job.value;
tdMgr.innerHTML = document.forms[0].mgr.value;
tdSal.innerHTML = document.forms[0].sal.value;
tdComm.innerHTML = document.forms[0].comm.value;
tdDeptName.innerHTML = document.forms[0].deptName.value;

if (empListTable.rows.length % 2 == 1) {
tr.className = "trOne";
} else {
tr.className = "trTwo";
}
//window.close();
}
-->
</script>
</head>

<body background="pixel01.gif">
<form>
<table align="center" width="60%" border="1" bordercolor="purple">
<caption><font size="7" face="黑体" color="purple"><i>员工详细信息</i></font></caption>
<tr bgcolor="violet">
<td align="right" width="30%">编号</td>
<td align="left"><input type="text" name="empNo" value="9015"></td>
</tr>
<tr bgcolor="plum">
<td align="right">姓名</td>
<td align="left"><input type="text" name="empName"></td>
</tr>
<tr bgcolor="violet">
<td align="right">职位</td>
<td align="left"><input type="text" name="job"></td>
</tr>
<tr bgcolor="plum">
<td align="right">主管</td>
<td align="left"><input type="text" name="mgr"></td>
</tr>
<tr bgcolor="violet">
<td align="right" width="30%">工资</td>
<td align="left"><input type="text" name="sal"></td>
</tr>
<tr bgcolor="plum">
<td align="right">奖金</td>
<td align="left"><input type="text" name="comm"></td>
</tr>
<tr bgcolor="violet">
<td align="right">部门</td>
<td align="left"><input type="text" name="deptName"></td>
</tr>
<tr>
<td bgcolor="plum" colspan="2" align="center"><input type="button" value="确定" onclick="doAddEmp()"></td>
</tr>
</table>
</form>
</body>
</html>
...全文
585 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
woyesyes 2011-08-01
  • 打赏
  • 举报
回复
success:function(data){
$(".gridtb tbody").html("");
for(var i = 0;i<data.length;i++){
var time = data[i].CRETTM;
$(".gridtb tbody").append("<tr id="+i+"></tr>");
$("#"+i).append("<td><input type='radio' value='"+data[i].ID+"' id='user' name='user' /></td>")
$("#"+i).append("<td>"+data[i].ID+"</td>")
$("#"+i).append("<td>"+data[i].USERNA+"</td>")
$("#"+i).append("<td>"+time.substring(0,10)+"</td>")

}

看下JQury多简单
cx170817965 2011-08-01
  • 打赏
  • 举报
回复
网上一搜一大把
傻傻的傻傻傻 2011-08-01
  • 打赏
  • 举报
回复
用jquery 吧,好东西。
hxx910920 2011-07-27
  • 打赏
  • 举报
回复
用jquery 很容易做到的
zl3450341 2011-07-27
  • 打赏
  • 举报
回复
一个简单的JS 操作DOM 而已
jnhcd 2011-07-27
  • 打赏
  • 举报
回复
接分接分
q1531 2011-07-26
  • 打赏
  • 举报
回复
用jquery或者类似的js框架吧。。缩短开发时间。
树成 2011-07-26
  • 打赏
  • 举报
回复
想不到是使用innerHTML做的,这种方式存在一个问题,添加是容易了,删除一行MS会比较头疼,特别是删除某指定的一行或者若干行。还有修改也很头疼
lin6626536 2011-07-26
  • 打赏
  • 举报
回复
搞一个w3cschool的帮助文档,楼主以后类似这问题就不会出来问了。
淫生杯具 2011-07-25
  • 打赏
  • 举报
回复
用dom,
var tr=document.createElement("tr");
var td=document.createElement("td");
var input= document.createElement("input");
td.appendChild(input);
tr.appendChild(td);
document.getElementsByTagName("table")[0].appendChild(tr);
或者用jquery
$("<tr><td><input/></td></tr>").appendTo("table");
jiangdaxian2003 2011-07-25
  • 打赏
  • 举报
回复
用jquery加一个<tr></tr>标签,
zn85600301 2011-07-22
  • 打赏
  • 举报
回复
百度 多的是 js自增行
江郎才近 2011-07-22
  • 打赏
  • 举报
回复
用javascript来实现这个,还是很容易办到的
shixitong 2011-07-22
  • 打赏
  • 举报
回复
看看,javascript操作DOM
woaixiaofeng1314 2011-07-22
  • 打赏
  • 举报
回复
自己 运行一下 就晓得结果了 !!不错的代码!
woaixiaofeng1314 2011-07-22
  • 打赏
  • 举报
回复
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB2312">

<title>HTML表格</title>


<style>
<!--
body {
text-align: center;
background-color: pink;
background-image: url(pixel01.gif);
background-repeat: repeat;
}

table {
border: 5px double purple;
}

caption {
font-family: 黑体;
font-size: 60px;
font-style: italic;
font-weight: bold;
color: purple;
}

.trHead {
background-color: #FFAA99;
}

.trOne {
background-color: violet;
text-align: center;
}

.trTwo {
background-color: plum;
text-align: center;
}

.alignLeft {
text-align: left;
}

.alignRight {
text-align: right;
}

.alignCenter {
text-align: center;
}

.width30 {
width: 30%;
}

#form {
width: 80%;
}

#myName {
width: 400px;
height: 80px;
}

p.colorRed {
color: red;
}

body, input, textarea {
cursor: url(images/dd.ico);
}

center p.size50 {
font-family: 黑体;
font-size: 50px;
}
-->
</style>

<script>
<!--
function doAddPage() {
var newWin = window.open("empInfo.html");

//alert(newWin.document.forms[0].empNo.value);
}
-->
</script>
</head>

<body background="pixel01.gif">
<table id="empListTable" align="center" width="80%" border="4" bordercolor="purple" cellspacing="2" cellpadding="5">
<caption><font face="黑体" size="7" color="purple"><i>员工信息列表</i></font></caption>
<tr>
<td colspan="7" align="right"><input type="button" value="添加员工信息" onclick="doAddPage()"></td>
</tr>
<tr class="trHead">
<th><font color="blue">员工编号</font></th>
<th><font color="blue">员工姓名</font></th>
<th><font color="blue">职位</font></th>
<th><font color="blue">主管</font></th>
<th><font color="blue">工资</font></th>
<th><font color="blue">奖金</font></th>
<th><font color="blue">部门</font></th>
</tr>
<tr class="trOne">
<td>9001</td>
<td>zhao</td>
<td>程序员</td>
<td>9000</td>
<td>4000</td>
<td>1000</td>
<td>开发部</td>
</tr>
<tr class="trTwo">
<td>9002</td>
<td>qian</td>
<td>程序员</td>
<td>9000</td>
<td>4000</td>
<td>1000</td>
<td>开发部</td>
</tr>
<tr class="trOne">
<td>9003</td>
<td>sun</td>
<td>程序员</td>
<td>9000</td>
<td>4000</td>
<td>1000</td>
<td>开发部</td>
</tr>
<tr class="trTwo">
<td>9004</td>
<td>li</td>
<td>程序员</td>
<td>9000</td>
<td>4000</td>
<td>1000</td>
<td>开发部</td>
</tr>
</table>
</body>
</html>
YeHuai1991 2011-07-22
  • 打赏
  • 举报
回复
并且<table>标签中增加一个ID属性为'empListTable'
YeHuai1991 2011-07-22
  • 打赏
  • 举报
回复
<script>

function doAddEmp() {

var x=document.getElementById('empListTable').insertRow(0)
var y=x.insertCell(0)
var z=x.insertCell(1)
y.innerHTML="<td align=right>姓名</td>";
z.innerHTML="<td align=left><input type=text name=empName></td>";

}

</script>
JerryZhou_ 2011-07-22
  • 打赏
  • 举报
回复
嗯、不错、就是觉得有点繁琐、就像楼上说的
NextMorning 2011-07-22
  • 打赏
  • 举报
回复
看到这一大片代码很是头疼,怎么不用jquery 呢,一句话的问题!

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧