如何通过JS增加行？如何通过JS增加行？如何通过JS增加行？

daqi2010 2009-12-21 03:15:01
<table id="mytab">
<tr> <td>编号 </td> <td>姓名 </td> </tr>
<tr> <td>1 </td> <td>小王 </td> </tr>
<tr> <td>2 </td> <td>小明 </td> </tr>
<tr> <td>3 </td> <td>小如 </td> </tr>
<tr> <td>4 </td> <td>小陈 </td> </tr>
<tr> <td>5 </td> <td>小赵 </td> </tr>
<tr> <td>6 </td> <td>小刘 </td> </tr>
<tr> <td>7 </td> <td>小王 </td> </tr>
<tr> <td>8 </td> <td>小明 </td> </tr>
<tr> <td>9 </td> <td>小如 </td> </tr>
<tr> <td>10 </td> <td>小陈 </td> </tr>
</table>
通过JS如何变成
<table id="mytab">
<tr><td colSpan="3" align="center">员工表</td></tr> //新增的行
<tr><td>编号 </td> <td>姓名 </td> </tr>
<tr><td>1</td><td>小王</td></tr>
<tr><td>2</td><td>小明</td></tr>
<tr><td>3</td><td>小如</td></tr>
<tr><td>4</td><td>小陈</td></tr>
<tr><td>5</td><td>小赵</td></tr>
<tr><td>6</td><td>小刘</td></tr>
<tr><td>7</td><td>小王</td></tr>
<tr><td>8</td><td>小明</td></tr>
<tr><td>9</td><td>小如</td></tr>
<tr><td>10</td><td>小陈</td></tr>
---
<tr><td>合计</td><td>10人</td></tr> //新增的行
</table>
...全文
359 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
lihuanok 2010-10-21
  • 打赏
  • 举报
 回复
<html>
<head>
<title>添加行</title>
<script type="text/javascript">
function addRow(tb)
{
var tb=document.getElementById(tb);
var tbody = tb.childNodes[0];
//插入行
var len = tbody.rows.length;
tbody.insertRow(len);
//插入列
tbody.rows[len].insertCell(0);
tbody.rows[len].cells[0].appendChild(document.createTextNode("csdn"));

tbody.rows[len].insertCell(1);
tbody.rows[len].cells[1].setAttribute("align","center");
tbody.rows[len].cells[1].appendChild(document.createTextNode("员工表"));
}
</script>
</head>
<body>
<table id="mytab" style="width:100px" border="1">
<tr> <td>编号 </td> <td>姓名 </td> </tr>
<tr> <td>1 </td> <td>小王 </td> </tr>
<tr> <td>2 </td> <td>小明 </td> </tr>
<tr> <td>3 </td> <td>小如 </td> </tr>
<tr> <td>4 </td> <td>小陈 </td> </tr>
<tr> <td>5 </td> <td>小赵 </td> </tr>
<tr> <td>6 </td> <td>小刘 </td> </tr>
<tr> <td>7 </td> <td>小王 </td> </tr>
<tr> <td>8 </td> <td>小明 </td> </tr>
<tr> <td>9 </td> <td>小如 </td> </tr>
<tr> <td>10 </td> <td>小陈 </td> </tr>
</table>
<input type="button" name="btnAddRow" onclick="addRow('mytab')" value="添加行"/>
</body>
</html>
daqi2010 2009-12-22
  • 打赏
  • 举报
 回复
上面的两种方法是都有错。怎么办啊
hotup 2009-12-21
  • 打赏
  • 举报
 回复
表格的操作会比较复杂,表格不支持用 innerHTML 的方式建表格子项,,,用JQuery这个插件吧..会很省心..



zardo 2009-12-21
  • 打赏
  • 举报
 回复
两种方法都可以
zardo 2009-12-21
  • 打赏
  • 举报
 回复 


<html>

<head>

<title>添加行</title>

<script type="text/javascript">

function addRow(tb)

{

	var tb=document.getElementById(tb);

	var tbody = tb.childNodes[1];

	//插入行

	tbody.insertRow(0);

	//插入列

	tbody.rows[0].insertCell(0);

	tbody.rows[0].cells[0].setAttribute("align","center");

	tbody.rows[0].cells[0].setAttribute("colspan","2");

	tbody.rows[0].cells[0].appendChild(document.createTextNode("员工表"));

}

</script>	

</head>

<body>

<table id="mytab" style="width:100px"> 

<tr> <td>编号 </td> <td>姓名 </td> </tr> 

<tr> <td>1 </td> <td>小王 </td> </tr> 

<tr> <td>2 </td> <td>小明 </td> </tr> 

<tr> <td>3 </td> <td>小如 </td> </tr> 

<tr> <td>4 </td> <td>小陈 </td> </tr> 

<tr> <td>5 </td> <td>小赵 </td> </tr> 

<tr> <td>6 </td> <td>小刘 </td> </tr> 

<tr> <td>7 </td> <td>小王 </td> </tr> 

<tr> <td>8 </td> <td>小明 </td> </tr> 

<tr> <td>9 </td> <td>小如 </td> </tr> 

<tr> <td>10 </td> <td>小陈 </td> </tr> 

</table> 

<input type="button" name="btnAddRow" onclick="addRow('mytab')" value="添加行"/>

</body>

</html>
zardo 2009-12-21
  • 打赏
  • 举报
 回复

<html>
<head>
<title>添加行</title>
<script type="text/javascript">
function addRow(tb)
{
var tb=document.getElementById(tb);

var tr=document.createElement("tr");
var td=document.createElement("td");
txtNode = document.createTextNode("员工表");
td.setAttribute("colspan","3");
td.setAttribute("align","center");

td.appendChild(txtNode);
tr.appendChild(td);
tb.childNodes[1].insertBefore(tr,tb.childNodes[1].childNodes[0]);
}
</script>
</head>
<body>
<table id="mytab" style="width:100px">
<tr> <td>编号 </td> <td>姓名 </td> </tr>
<tr> <td>1 </td> <td>小王 </td> </tr>
<tr> <td>2 </td> <td>小明 </td> </tr>
<tr> <td>3 </td> <td>小如 </td> </tr>
<tr> <td>4 </td> <td>小陈 </td> </tr>
<tr> <td>5 </td> <td>小赵 </td> </tr>
<tr> <td>6 </td> <td>小刘 </td> </tr>
<tr> <td>7 </td> <td>小王 </td> </tr>
<tr> <td>8 </td> <td>小明 </td> </tr>
<tr> <td>9 </td> <td>小如 </td> </tr>
<tr> <td>10 </td> <td>小陈 </td> </tr>
</table>
<input type="button" name="btnAddRow" onclick="addRow('mytab')" value="添加行"/>
</body>
</html>
happy664618843 2009-12-21
  • 打赏
  • 举报
 回复
var tr=tb.insertRow(5);
var cl=tr.insertCells(5);
cl.innerHtml();
或者直接CloneNode()
tr.Cells[0].fristChild.value=newtr.rowIndex
daqi2010 2009-12-21
  • 打赏
  • 举报
 回复
楼上的各位大哥。 具体应该如何做了。我试了上面的方法，不成功
草根醉秋意 2009-12-21
  • 打赏
  • 举报
 回复
javascript 对表格的操作
chate 2009-12-21
  • 打赏
  • 举报
 回复
2楼和4楼能写详细点吗？
cc8364 2009-12-21
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 jiayouxh 的回复:]
用DOM方式创建，效率比inertRow高许多。


[/Quote]
顶这个
hewei_shine 2009-12-21
  • 打赏
  • 举报
 回复
1楼正解。效率高低就不知道了。
jiayouxh 2009-12-21
  • 打赏
  • 举报
 回复
用DOM方式创建，效率比inertRow高许多。

xmliy 2009-12-21
  • 打赏
  • 举报
 回复 


var table = document.getElementById('mytab');

var tr = table.insertRow(-1);

var td = tr.insertCell(-1);

td.innerHTML = '<合计>';

td = tr.insertCell(-1);

td.innerHTML = '10人';
spring java图片上传源码.rar
源码实现了图片上传功能，可供相关功能开发的小伙伴参考学习使用。
新入职员工工作总结范文大全(篇).docx
工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。
本项目内容为《SpringBoot 2.X 基础教程》配套源码.zip
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
IMG_20240426_195457.jpg
IMG_20240426_195457.jpg
培训看版.xlsx
Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示
JavaScript

87,910

社区成员

224,616

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章