js插入行、列[insertRow()、insertCell()]

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.2k 收藏 2
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wang1537/archive/2013/05/06/3063530.html
版权

测试1

 

tableObj.insertRow(index)，在表格指定位置插入一个新行元素()，新行被插在index所在行之前。该方法的返回值是插入的新行。

如果一个表格有3行，index=0时插入第一行，index=3时插入最后一行，如图：
图例(图_1)
若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

测试2

 

与此类似的还有tablerowObj.insertCell(index)方法，是在表格的某行插入一个新的单元格元素()
需要注意的是，如果是往insertRow()新增的一个行元素里插入新td元素时，必须先插入第0个td(一次插入td)，否则会报错.

View Code 
<html>
<head>
    <script type="text/javascript" >
        function ins(){
            var tableObj = document.getElementById("table1");
            var trObj = tableObj.insertRow(0);
            //trObj是一个新增的行，如果不新增第0个td直接新增第1个会报错
            var tdObj1 = trObj.insertCell(0);
            tdObj1.innerHTML = "0";

            var tdObj2 = trObj.insertCell(1);
            tdObj2.innerHTML = "00";

            var tdObj3 = trObj.insertCell(2);
            tdObj3.innerHTML = "000";//比原表格中的列多了，表格混乱

        }
    </script>
</head>
<body>
    <table border="1" id="table1" style="width:200px;">
        <tr id="tr1">
            <td>1</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td></td>
        </tr>
    </table>
    <input type="button" onclick="ins()" value="ins"/>
</body>
</html>

 

转载于:https://www.cnblogs.com/wang1537/archive/2013/05/06/3063530.html

weixin_30820151
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap-table插入可编辑行，文本框形式（非官方自带的）
05-12
在网上找了下这方面资料都不太满足自己需求，自己就写了个，里面有初始数据都不可编辑只有手动点击插入新的行是可编辑；还有是初始数据全部可编辑，插入新行也是可编辑的，全部编辑形式是input框里直接编辑，失去焦点触发事件，非官方自带的编辑形式，将页面放到bootstrap-table的demo项目的insertRow.html同目录下即可
JS-表的行添加操作(insertRow)
weixin_30446197的博客
05-06 428
var rowCount = document.getElementById("dataTable").rows.length; var createCount; var tbObj = document.getElementById("dataTable"); if(rowCount == 0){ var rs = tbObj.rows; ...
javascript操作table（insertRow()，deleteRow()，insertCell()，deleteCell()方法）
fox123871的专栏
08-11 2028
insertRow() 方法 定义和用法 insertRow() 方法用于在表格中的指定位置插入一个新行。 语法 tableObject.insertRow(index) 返回值 返回一个 TableRow，表示新插入的行。 说明 该方法创建一个新的 Tab
js操作 添加删除table行，并进行刷新
SieSteven
01-22 1万+
添加行的js如下  table 的id为myTable 添加table的一行内容  function insertRow() {             var rowValue = document.getElementById("zdhRowCount").value;             //            alert(rowValue);             if
js的insertRow(-1)和insertCell(-1)
limuxia的专栏
10-28 6608
js的insertRow(-1)和insertCell(-1)实际上就是在table表格的行和列结尾插入行和列，而不必专门计算出行列数，但W3C标准说“若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常”
4、web(js)：js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
xushaozhang的专栏
02-15 2268
本文来自：http://www.cnblogs.com/dongxizhen/archive/2013/01/11/2856229.html 表格有几行: var trCnt = table.rows.length;  (table为Id ) 每行有几列：for (var i=0; i   javascript操作table:     insertRow()，deleteR
JS-表格行的动态删除和添加(insertRow deleteRow)
weixin_30430169的博客
02-26 433
row[]返回包含表格中所在行的一个数组 insertRow()在表格中插入一个新行 insertCell()在新添加的行中添空的<td>元素 deleteRow()删除行 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"&...
js 动态插入表格设置样式 js设置样式
zhouzilong502086525的专栏
06-02 1万+
js 动态插入表格设置样式 js设置样式发表于2010 年 08 月 23 日由搜集者Js代码 var mytable = document.getElementById(“propertyTable”);   var row = mytable.insertRow();   <br />方法一：设置css class方式，如下，“table01-td01″为一css class样式Js代码 var mytd= row.insertCell();   mytd.className=”table01-td01
js的insertRow和insertCell用法
weixin_30359021的博客
09-13 913
js的insertRow(-1)和insertCell(-1) 增加最后一行和增加最后一列 js的insertRow(5)和insertCell(5) 第5行后增加一行和增加第5列后增加一列 转载于:https://www.cnblogs.com/amylis_chen/p/11516202.html...
javascript 动态添加表格行
龙的天空
03-09 911
原文出处：[url]http://www.wangchao.net.cn/bbsdetail_305567.html[/url]动态添加表格行 文/Ray 表格部分代码如下：第一行第二行第三行动态添加表行的javascript函数如下：function addRow(){//添加一行var newTr = testTbl.insertRow();//添加两列var newTd0 = n
js动态添加表格数据使用insertRow和insertCell实现
12-03
效果图: 代码: js动态添加表格数据_2.html 代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>js动态添加表格数据_2 使用insertRow和insertCell方法实现</title> [removed] var mailArr = [ { “title”: “一个c#问题”, “name
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
10-26
本篇文章主要介绍了javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法)需要的朋友可以过来参考下，希望对大家有所帮助
javascript之table增加行
fycghy0803的专栏
07-25 1833
众所周知,javascript中的table增加行一般均使用insertRow(n)来进行,但有时间我们为了复制行,这时使用insertRow实现起来就有点操作麻烦了,因此一般我们都应该使用appendChild或insertBefore进行操作,相应的伪代码如下:                            test text
javascript 动态创建表格：新增、删除行和单元格
sr2012的专栏
11-12 836
利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。 1、inserRow()和insertCell()函数 insertRow()函数可以带参数，形式如下： insertRow(index)：index从0开始 这个函数将新行添加到ind
点击按钮增加一行表格
热门推荐
聆听
12-26 2万+
点击按钮增加一行表格 做此功能我们要用到两个方法： insertRow()： insertRow() 方法用于在表格中的指定位置插入一个新行。 insertCell() ：insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 元素。 <%@ page language="java" contentType="text/html; char
insertRow()与insertCell()方法的运用
leejin_521的专栏
11-04 4894
insertRow()与insertCell()方法的运用 例子1： var count=1; function tt() { var obj = document.forms[0].getElementsByTagName("input"); if(count > 9 || obj[obj.length-1].value =="")    return alert("
WPS的JS宏基础（一）
一位VBA和JSA、书法爱好者
11-09 3564
【代码】JS宏基础。
简单自定义WPS JS宏函数(二)
Cai_hh的博客
10-29 733
1.分行函数 弹出一个窗口输入分隔符 只能选择连续的区域(按列选,或单个单元格或单元格区域)只能选择连续的区域(按列选,或单个单元格或单元格区域)将这些数据按分隔符分开,并复制非本列的数据。分行后本列数据被分,其余列数据保持一致。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 624
步骤很详细，直接上教程……
HTML表格 增加一行 插入日期
09-07
### 回答1： 要在HTML表格中增加一行并插入日期，可以使用JavaScript来实现。可以使用以下代码： ```html <table id="myTable"> <tr> <td>第一列</td> <td>第二列</td> </tr> <tr> <td>第一列</td> <td>第二列</td> </tr> <tr> <td>第一列</td> <td>第二列</td> </tr> </table> <button onclick="addRow()">增加行</button> <script> function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(table.rows.length); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = "新的第一列"; cell2.innerHTML = new Date(); } </script> ``` 在这个例子中，我们先定义了一个表格，并且指定了它的id为“myTable”。然后，我们定义了一个按钮，并且指定了点击按钮时调用的JavaScript函数为“addRow()”。 在“addRow()”函数中，我们首先获取了表格对象。然后，我们使用“insertRow()”方法在表格的最后一行插入了一行新的行。接着，我们使用“insertCell()”方法在新行中插入了两个新的单元格。最后，我们分别为这两个单元格设置了内容，其中第二个单元格使用了“Date()”函数来获取当前日期。 ### 回答2： 在HTML表格中增加一行并插入日期的方法是使用JavaScript来动态生成表格，并在所需位置插入日期。 首先，在HTML文件中创建一个表格，包括表头和至少一个表格行。例如： ```html <table id="myTable"> <thead> <tr> <th>列1</th> <th>列2</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> </tr> </tbody> </table> ``` 然后，使用JavaScript获取表格对象，并在需要插入日期的位置使用insertRow()方法插入一行。例如，如果我们想在第一行之后插入日期行，可以使用以下代码： ```javascript var table = document.getElementById("myTable"); var dateRow = table.insertRow(1); ``` 接下来，使用insertCell()方法在日期行中插入单元格，并使用new Date()函数获取当前日期。将日期设置为单元格的内容。以下为代码示例： ```javascript var table = document.getElementById("myTable"); var dateRow = table.insertRow(1); var cell = dateRow.insertCell(0); var currentDate = new Date(); cell.innerHTML = currentDate.toLocaleDateString(); ``` 最后，如果需要，可以根据需要自定义日期格式，并使用toLocaleDateString()方法将日期格式化为字符串显示在单元格中。 以上就是在HTML表格中增加一行并插入日期的方法，通过JavaScript动态生成表格，并在需要的位置插入日期。 ### 回答3： 在HTML表格中增加一行并插入日期可以通过以下步骤完成： 1. 找到要插入日期的表格。可以使用table标签创建一个表格，或者在现有的表格中找到要插入行的位置。 2. 在表格中插入一行。可以使用tr标签创建一行，或者在现有的行中找到要插入单元格的位置。 3. 在新插入的行中插入日期。可以使用td标签创建一个单元格，并在其中输入日期。 具体的代码实现如下： ```html <!DOCTYPE html> <html> <head> <title>HTML表格插入日期</title> </head> <body> <table> <tr> <th>姓名</th> <th>年龄</th> <th>日期</th> </tr> <tr> <td>张三</td> <td>25</td> <td>2022-01-01</td> </tr> <tr> <!-- 在此行之后插入新的一行 --> <td>李四</td> <td>30</td> <td>2022-01-02</td> </tr> <tr> <td>王五</td> <td>28</td> <td>2022-01-03</td> </tr> </table> </body> </html> ``` 在上述例子中，我们创建了一个包含3行的表格。要在第二行之后插入一个新行，我们使用了tr标签，并在其中插入了姓名、年龄和日期的单元格。在此例中，我们将日期设置为固定的值，你可以根据需要自行更改日期内容。 希望能帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值