今天同事问了我一个问题，为表格添加新的行，我用的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. java自动化测试-json返回值校验

    参考: https://blog.csdn.net/xkhgnc_6666/article/details/50250283 实现举例:

  2. [JSOI2010]快递服务

    Description Luogu4046 BZOJ1820 Solution 暴力DP很好想,\(f[i][j][k][l]\)表示处理到第\(i\)个任务,三个人在\(i,j,k\)的方案数.显然 ...

  3. 自定义Nginx返回页面

    1.403返回页面 #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log noti ...

  4. robotframework常见报错记录

    1.'Response' object has no attribute '__getitem__':'Response'对象没有属性' getitem__' response对象的属性r.statu ...

  5. vs2019清空输入缓冲区

    发现用cin.sync()在vs2019中不能清空输入缓冲区,以前的vs版本没试过,我看别人在vc中用cin.sync()可以清除,估计是IDE的问题..以下是我学习C++四个多月写的一整段代码 运行 ...

  6. 巨杉Tech | SequoiaDB虚机镜像正式上线

    数据库云化架构需求 随着云架构的发展和流行,在业务和应用进行“云化”的过程中,云数据库因为在整体架构中的重要地位,在云化改造中的重要性不言而喻.云数据库需要满足这些技术要求,除了在功能上的具体提升,在 ...

  7. mysql中循环插入数据

    循环插入1w条数据 表结构: mysql> desc time_table; +-------+-----------+------+-----+-------------------+---- ...

  8. 用navicate 连接本地数据库提示用户名/口令无效

    1.在用navicate连接本地的oracle数据库时,试了oracle几个默认的用户名和密码,但是当我输入时,却提示用户名/口令无效.所以按照网上的办法,cmd,输入了以下命令,修改了几个用户的用户 ...

  9. Java-POJ1013-Counterfeit Dollar

    在13枚硬币中找出fake的那一个 输入:三次天平称量结果 package poj.ProblemSet; import java.util.Scanner; /* 我怎么觉得是贪心算法呢? 起初对所 ...

  10. 在Linux系统下安装jdk并配置环境变量

    本文主要介绍的是如何是Linux环境下安装JDK的,因为Linux环境下,很多时候也离不开Java的,下面笔者就和大家一起分享如何jdk1.8的过程吧. 1.安装环境 操作系统:CentOS 07 6 ...