HTML中table动态添加行或列

最新推荐文章于 2024-07-15 11:08:28 发布
最新推荐文章于 2024-07-15 11:08:28 发布
阅读量1.9w 收藏 6
点赞数 1
分类专栏： HTML 文章标签： HTML table 添加行和列 insertRow append

原文地址：http://www.cnblogs.com/badegg/articles/1334673.html

<html>
	<head>
	<script type="text/javascript">
		function AddTableRow()
		{
    		<span style="white-space:pre">	</span>var Table = document.getElementById("tab");   //取得自定义的表对象
    		<span style="white-space:pre">	</span>NewRow = Table.insertRow();                        //添加行
    		<span style="white-space:pre">	</span>NewCell1= NewRow.insertCell();                     //添加列
			NewCell2=NewRow.insertCell();
			NewCell1.innerHTML = "<B>这是新加的列</B>";          //添加数据
			NewCell1.innerHTML="<a href='#'>这是空链接</a>";
		}			 
	</script>
	</head>
	<body>
		<table id="tab">
			<tr><td>1</td></tr>
			<tr><td>2</td></tr>
		</table>
	<input type="button" id="bn" value="add" οnclick="AddTableRow()" />
	</body>
</html>


boucher2001
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript table 动态添加行，列
04-20
无标题文档 function show() { var num1=document.getElementById('num1').value; var num2=document.getElementById('num2').value; var myDiv=document.getElementById('showDiv'); var _table=document.createElement("table"); _table.id="table2"; //设置表格属性 _table.setAttribute("border","1"); _table.setAttribute("borderColor","black"); _table.setAttribute("width","200"); //创建一行 for(var i=0;i<num1;i++){ var _tr=_table.insertRow(i); //创建八列 for(var j=0;j<num2;j++){ var _td=_tr.insertCell(j); //var _tn=document.createTextNode(i.toString()+j.toString()); var t=document.createElement("input"); t.size=20; _td.appendChild(t); } } myDiv.appendChild(_table); }
html动态添加table行
10-12
实现自动添加table行，增删改查功能统一完成实现，统一提交
react Ant Design 动态表头添加操作列
m0_61672533的博客
07-15 320
react Ant Design 动态表头添加操作列
html table动态添加行列
weixin_30432179的博客
10-31 1060
//1.js var addRowOrCol = function(){ var Rows=e1.rows var len = Rows.length; var col=0; if(len !== 0){ col = Rows.item(len-1).cells.length ; log("col:"+col) } log("len:"+len) if(len === 0) { var ...
html table表格动态显示
m0_58361435的博客
02-19 969
【代码】html table表格动态显示。
动态操作html table
harbey的专栏
03-27 2062
1.动态操作表的一行:   动态操作表的行                    cellPadding=3 id="DemoTable">                        序号                         内容                         colspan="2">         程度                         选择
js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）...
lifeneedyou的专栏
04-29 344
       记得以前面试的时候遇到过这样一个问题：有一个表格，然后有４个输入框，一个合并 按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并 。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图：   第1/1列 第1/2列 第1/3列 第1...
table动态添加行并编辑
09-12
使用JavaScript，我们可以根据需求在运行时动态地向表格中添加行。通常涉及以下步骤： 1. 获取表格对象：通过DOM（Document Object Model）接口，如`document.getElementById`或`document.querySelector`来获取`...
table动态添加行
01-23
4. **事件绑定**：对于删除行功能，通常我们会将删除操作绑定到行的右键菜单或行的特定图标上，这需要使用`addEventListener`为每个行添加事件监听器。 这样，我们就实现了基本的`HTML`表格动态添加和删除行的功能...
表格动态添加行和列.html
最新发布
07-31
表格动态添加行和列，点击添加列，table自动添加列，点击添加行，自动添加行。
原生JS实现HTML－ TABLE 自动行合并插件
06-30
类功能描述：该插件生成一个具有行合并的列表数据，合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可，无需后端二次处理数据。 该类以纯原生JS编写，无需引入任何第三方库。 调用方法：...
HTML完美动态表格(可编辑)
04-23
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
js动态添加表(table、行).html
08-24
js动态添加表(table、行).html 点击可直接运行，或查看源码
<转>HTML的table动态加入行
weixin_30785593的博客
10-24 170
HTML的table动态加入行，代码如下 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <script> function get(event){ e=e...
html表格列中加列,记一次LayUI中Table动态添加列数据
weixin_39662228的博客
06-01 916
这次在开发中遇到，有列数不固定的情况。废话不多说，先上图，在上代码。下面上JS代码function SearchData() {var dYear = $("#DYear").val();var beginWeek = $("#DSWeek").val();var endWeek = $("#DEWeek").val();var params = {};params = CreateParamDa...
为table添加行和列
weixin_30527143的博客
07-10 114
1＜htmlxmlns="http://www.w3.org/1999/xhtml"＞2＜headrunat="server"＞3＜title＞AddRow＜/title＞4＜styletype="text/css"＞5.BlackBorder{background-color:#000;font-size:12px;}6...
动态创建HTML之Table
dibengpo4955的博客
04-19 130
在页面上的HTML服务器控牛的声明和普通的静态HTML标签的声明一样，使用附加的runat="server"特性，充高尔夫Asp.net处理服务器类，并把它们翻译成对应的.net类的实例。 //在Page_Load事件中添加如下代码 protectedvoidPage_Load(objectsender,EventArgse) { ...
js添加table的行和列
___ 、努ㄌ
07-28 3033
function addRow() { var newTR = document.getElementById("testTable").insertRow(document.getElementById("testTable").rows.length
html 表格自动增加一行,table表格动态添加删除行
weixin_28813803的博客
05-31 573
/** Style tweaks* --------------------------------------------------*/html,body {overflow-x:hidden;/* Prevent scroll on narrow devices */}body {padding-top:70px;}footer {padding:30px 0;}/* CUSTOMIZE T...
table动态添加行和列
05-27
动态添加表格行和列可以使用 JavaScript 或 jQuery。 添加行： 使用 JavaScript： ```html <table id="myTable"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>20</td> </tr> </table> <button onclick="addRow()">添加行</button> <script> function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(); // 插入新行 var cell1 = row.insertCell(0); // 插入单元格 var cell2 = row.insertCell(1); cell1.innerHTML = "新姓名"; // 设置单元格内容 cell2.innerHTML = "新年龄"; } </script> ``` 使用 jQuery： ```html <table id="myTable"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>20</td> </tr> </table> <button onclick="addRow()">添加行</button> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> function addRow() { $("#myTable").append("<tr><td>新姓名</td><td>新年龄</td></tr>"); // 添加行 } </script> ``` 添加列： 使用 JavaScript： ```html <table id="myTable"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>20</td> </tr> </table> <button onclick="addColumn()">添加列</button> <script> function addColumn() { var table = document.getElementById("myTable"); var header = table.getElementsByTagName("th"); // 获取表头 for (var i = 0; i < header.length; i++) { var newCell = header[i].insertCell(-1); // 在表头插入单元格 newCell.innerHTML = "新列"; // 设置单元格内容 } var row = table.getElementsByTagName("tr"); // 获取表格所有行 for (var i = 0; i < row.length; i++) { var newCell = row[i].insertCell(-1); // 在每行末尾插入单元格 newCell.innerHTML = "新单元格"; // 设置单元格内容 } } </script> ``` 使用 jQuery： ```html <table id="myTable"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>20</td> </tr> </table> <button onclick="addColumn()">添加列</button> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> function addColumn() { $("#myTable tr").each(function() { $(this).append("<td>新单元格</td>"); // 在每行末尾插入单元格 }); $("#myTable th:last-child").after("<th>新列</th>"); // 在表头插入新列 } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值