JS动态添加行

最新推荐文章于 2021-08-21 16:43:24 发布
最新推荐文章于 2021-08-21 16:43:24 发布
阅读量374 收藏
点赞数
分类专栏： html css Javascript 文章标签： JS动态添加行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linrenchao/article/details/44855511
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>动态添加行</title>
    <script language="javascript" type="text/jscript">
        function add_input(tbinput, index)
        {
            input_name = "input" + index;
            var tr_input = document.createElement("tr");
            var td_input = document.createElement("td");
            var input_input = document.createElement("input")
            input_input.setAttribute("type","input")
            input_input.setAttribute("size","50")
            input_input.setAttribute("name",input_name)

            td_input.appendChild(input_input)
            tr_input.appendChild(td_input)
            tbinput.appendChild(tr_input)
        }
        function add_one_input()
        {
            var tb_input = document.getElementById("userTable");
            var count_input = document.getElementById("userTable").childNodes.length;
            add_input(tb_input, count_input);
        }
    </script>
</head>
<body>
    <div style="text-align: center">
        <table style = "margin : auto">
            <tr>
                <td>
                    <table id="userTable">
                        <tr>
                            <td><input type="input" name="input1" size="50"/></td>
                        </tr>
                        <tr>
                            <td><input type="input" name='input2' size="50"/></td>
                        </tr>
                        <tr>
                            <td><input type="input" name='input3' size="50"/></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="新增一行" οnclick="add_one_input()"/>
                </td>
            </tr>
        </table>
    </div>
</body>

丁葵草
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js实现动态增加行
Ask马小向的专栏
07-24 3601
实现效果如下图所示： 图1，初始界面为一行表格，第一行可以删除。 图2，点击“添加”，可以增加一行，点击“清空”可以清除所有数据，点击“删除”可以删除一行。 实现方法为如下： （1）引入js：add.js（见附件） （2）实现初始化页面就显示一行。 （3）页面中加入信息条目，并                                序号
如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）
m0_64053511的博客
02-08 8692
1方法一： 使用table的insertRow()方法插入一行，使用table.removeChild(tr)删除一行，具体的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ text-align: c.
纯JS table动态增加行
Everyone_boy的博客
08-21 7909
JS代码： function addRow(tableId) { var tb=document.getElementById(tableId); var tbRows=tb.rows; var newTr=tb.insertRow(tbRows.length); newTr.align="center"; var newTd0=newTr.insertCell(0); var newTd1=newTr.insertCell(1); var newTd2=newTr.insertCel
javascript动态添加行的例子
添砖Java
12-22 3203
New Document  function addTableRow(){       var tr = window.event.srcElement.parentElement.parentElement;  var tbody = tr.parentElement;  var tr0 = tbody.rows[0];  var oTR = tbody.insertRow(tr.rowInd
js动态添加行和删除行
08-24
js动态添加行和删除行
JS-Table动态增加删除行
在路上
04-19 1万+
JS代码块<script> function add(){ //获取元素的值 var name = document.getElementById("name").value; var tel = document.getElementById("tel").value;
js动态添加行
07-17
当前文件为js动态添加行的示例，可以直接使用，也可以根据自身需求进行扩展使用，当前示例采用js动态获取对象，动态创建对象的方式进行实现动态添加行的功能。希望能够与大家分享。共同进步
利用javascript动态添加行(原创)
07-19
1. **DOM操作**：JavaScript动态添加行的核心是Document Object Model (DOM)。DOM是HTML和XML文档的结构化表示，通过它可以读取、修改和更新页面内容。使用DOM方法如`createElement()`, `appendChild()` 和 `...
table 使用js 高效 动态添加行
04-16
使用js动态添加行，简单而方便，所以操作table。
js向table中动态插入新行
lin_tuer的博客
12-04 3626
首先获得表格 用insertRow(0)等来实现插入新行，在新行中插入insertCell(i); 在写内容就可以啦
javascrip 动态添加行
回首如梦
07-22 166
[code="java"] 增加Table行 function addRow(obj) { //添加一行 var newTr = testTbl.insertRow(); //添加两列 var newTd0 = n...
js动态给表格添加一行、删除一行
热门推荐
rmkloveme
10-30 1万+
最近写代码遇到这个需求，特地总结了一下写了个demo，如下所示： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;new document&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=g
js动态表格添加一行删除一行保存一行
xiaogg3678的专栏
08-06 6004
js动态表格添加一行删除一行保存一行
使用JavaScript在表中指定位置插入一行
ictliujie的专栏
06-11 2462
 最近在学JavaScript，下面是我自己做的一个例子（在w3cschool例子的基础上）该例子实现功能是在鼠标点击的行之后插入一行，默认是在第一行插入。插入的内容可以自己输入，代码如下//global varvar pos =0//to find the position you mouse has pressedfunc
js添加、删除以及添加删除指定行
l2535460824的博客
06-13 4512
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; //在末尾添加一行 function add() { var mytable = document.get
js添加一个新行，可以输入的Input，用于添加更多的业务
lifeneedyou的专栏
06-09 327
     &lt;input type="button" onclick="addNewRow();" value="添加更多"/&gt; function addNewRow(){ var num=document.getElementById("num").value; var newNum=(num-0)+1; document.getElementById...
js 动态操作table 表格 在指定行后添加行 删除行
清叶 的专栏
11-16 9357
//根据ID删除table行 var tr_id = $("#addTable>tbody>tr:last").attr("id"); if(tr_id == '123'){ $('#'+tr_id).remove(); //删除ID=123的行 } //在指定ID行下面添加行 var tr = 'add4add4add4add4addaddaddadd'; var zhid
js动态添加删除表格行
最新发布
06-10
可以使用JavaScript动态添加和删除表格行，以下是一个简单的示例： 添加行： ```javascript // 获取表格对象 var table = document.getElementById("myTable"); // 创建一个新的行 var newRow = table.insertRow...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值