今天同事问了我一个问题，为表格添加新的行，我用的js写了一下，代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    <script>

        var j=1;

        function addtr(){

            var tableobj =document.getElementById("tid");

            var trobj =document.createElement("tr");

            var tdobj = document.createElement("td");

            for(var i=0;i<4;i++)

            {

                var tdobj=document.createElement("td");

                tdobj.innerHTML=j++;

                trobj.appendChild(tdobj);

            }

            trobj.appendChild(tdobj);

            tableobj.appendChild(trobj);

        }

    </script>

    </head>

    <body>

        <input type="button" value="添加行" onclick="addtr()">

        <table border="1" id="tid">

            <tr>

                <td>A</td>

                <td>B</td>

                <td>C</td>

                <td>D</td>

            </tr>

        </table>

    </body>

</html>

　　

主要是一个appendChild方法。

使用js为表格添加一行的更多相关文章

  1. 利用jquery表格添加一行并在每行第一列大写字母显示实现方法

    表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...

  2. 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

    需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...

  3. js Table表格选中一行变色或者多选 并获取值

    使用JQ <script> let old, oldColor; $("#sp_body tr").click(function (i) { if (old) oldC ...

  4. js为表格添加行和列

    <table id="studentTable" align="center" border="1px;" cellpadding=& ...

  5. js隐藏表格的一行数据

    1.方法 document.getElementById('customerAccount_tr').style.display="";//缴纳人名称显示 document.get ...

  6. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  7. js实现在表格中删除和添加一行

    <!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...

  8. 点击按钮在表格的某一行下，在添加一行(HTML+JS)

    使用js在指定的tr下添加一个新的一行newTr html代码: <table> <tr> <td>用户名:</td> <td><in ...

  9. js实现表格信息的删除和添加

    制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮 ...

随机推荐

  1. RYU安装教程

    一.使用pip的形式安装RYU 1.首先检查ubuntu中是否存在pip,命令为 sudo pip3 --version 2.如果存在则使用默认版本8.1.1就行不必跟新,否则自己下载一个pip 3. ...

  2. [HNOI2004] L语言 - AC自动机,dp

    给定字典和没有标点的文章,求能够被识别的最长前缀. 显然不能贪心,设\(f[i]\)表示前\(i\)个字符构成的前缀能否被识别,然后在AC自动机上暴力转移即可. 具体来说,每走到一个新位置,就沿着fa ...

  3. String.format()的用法记录

    stirng.format("redirect:http://%s:%s%s",ip,port,path) 相当于http://localhost:8080/user/list S ...

  4. 零基础自学Python是看书还是看视频？

    很多人都碍于Python培训班的高昂费用和有限的空余时间都选择自学Python,但是没有老师帮助,显得有些迷茫,不知应该从何处学起,也不知识看书学习还是应该看视频学习.本就来谈谈这个话题.   我们先 ...

  5. python笔记20（面向对象课程二）

    今日内容 类成员 成员修饰符 内容回顾 & 补充 三大特性 封装 函数封装到类 数据封装到对象 * class Foo: def __init__(self,name,age): self.n ...

  6. JS实现“隐藏与显示”功能(多种方法)

    1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  7. 使用listView有感

    et listView = new ccui.ListView();this.addChild(listView,9999);listView.setDirection(ccui.ScrollView ...

  8. 【翻译】浅析为何使用融合CDN是大趋势

    使用传统CDN的用户遇到的新问题 随着云计算时代的快速发展,尤其是流媒体大视频时代的到来,用户在是使用过往CDN节点资源调配将面临很多问题: 问题1: 流媒体时代不局限于静态内容分发,直播点播等视频服 ...

  9. 小匠_碣 第三周期打卡 Task06~Task08

    Task06:批量归一化和残差网络:凸优化:梯度下降 批量归一化和残差网络 对输入的标准化(浅层模型) 处理后的任意一个特征在数据集中所有样本上的均值为0.标准差为1. 标准化处理输入数据使各个特征的 ...

  10. centos7修改xshell默认访问端口由22修改为62058

    1.vim /etc/ssh/sshd_config 2.新加端口62058:Port 62058 3.重启sshd服务:systemctl restart sshd 4.将新加端口添加到防火墙并重启 ...