今天同事问了我一个问题，为表格添加新的行，我用的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. wso2 使用配置

    1.下载wso2 https://docs.wso2.com 2.配置 https://172.10.0.59:9443/publisher https://172.10.0.59:9443/carb ...

  2. window.resizeTo

    概述 动态调整窗口的大小. 语法 window.resizeTo(aWidth, aHeight) 参数 aWidth 是一个整数,表示新的 outerWidth(单位:像素)(包括滚动条.窗口边框等 ...

  3. navicat连接mysql8.0+版本报错2059

    ERROR 2059 : Authentication plugin 'caching_sha2_password' cannot be loaded 问题: 连接Docker启动的mysql出现:E ...

  4. 158.Clickjacking点击劫持攻击实现和防御措施

    clickjacking攻击: clickjacking攻击又称为点击劫持攻击,是一种在网页中将恶意代码等隐藏在看似无害的内容(如按钮)之下,并诱使用户点击的手段. clickjacking攻击场景: ...

  5. JDBC——Connection数据库连接对象

    功能 1.获取执行SQL的对象 方法:createStatement() 用于创建向数据库发送SQL语句的一个对象.修饰/返回值类型:Statement(声明) 方法:prepareStatement ...

  6. numpy基础知识练习

    # 1.导入numpy模块 # 2.创建一个大小为10的空向量 # 3.创建一个大小为10的空向量,但是第五个值为1 # 4.创建一个10-49的ndarray数组 # 5.创建一个3x3的矩阵,其值 ...

  7. classification tips 01: npy file

    numpy array storation; npy/npz file. 文件存取的格式:二进制和文本.二进制格式的文件又分为NumPy专用的格式化二进制类型和无格式类型. numpy文件存取-npz ...

  8. XMLHttpRequest: 网络错误 0x2ee4, 由于出现错误 00002ee4 而导致此项操作无法完成

    原因: IE11有默认设置安全策略,如果url需要证书,一发送请求IE11就会拒绝,因为ssl certificate(SSL证书) 是非法的 解决方案: (1)修改IE浏览器配置 - 用户使用的电脑 ...

  9. SSH多表操作入门

    这个系统写到这里,所涉及到的都是单表的操作,增删改查,现在功能需要完善,涉及到多表操作,开始是毫无头绪,书上的代码也没有现成的可以借鉴,想来就从最简单的开始.问题出现了很多,不过最后在龙哥的提示下还是 ...

  10. Action路径问题

    上网搜了一下,先给个解决方案,贴个图保存,后面再专门写一写总结.