今天同事问了我一个问题，为表格添加新的行，我用的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. Python基础概念

    一.Python中执行代码的方式 直接在编译器中交互执行: 在编译器中通过Python和文件的路径执行: 在linux系统中可以./test.py(需要代码第一行增加# !/usr/bin/env p ...

  2. 【PAT甲级】1118 Birds in Forest (25分)（并查集）

    题意: 输入一个正整数N(<=10000),接着输入N行数字每行包括一个正整数K和K个正整数,表示这K只鸟是同一棵树上的.输出最多可能有几棵树以及一共有多少只鸟.接着输入一个正整数Q,接着输入Q ...

  3. hive创建表时报错

    这是因为mysql字符集的原因.修改mysql的字符集. mysql> alter database hive character set latin1; 参考博客:https://blog.c ...

  4. 解决Maven依赖报红的批处理文件

    maven经常因为网络或者其他原因导致仓库jar包下载不完整,导致jar包依赖报红,此小工具可以一键删除未下载完成文件 set REPOSITORY_PATH=E:\deplor\apache-mav ...

  5. Python内置方法/函数

    abs() 返回数字的绝对值. abs(x) all() 用于判断给定的可迭代参数 iterable 中的所有元素是否都为 TRUE,如果是返回 True,否则返回 False. 元素除了是 0.空. ...

  6. idea 配置 tomcat 教程

    最近在搞一个项目需要用到idea 配置tomcat,翻了翻网上的帖子发现稂莠不齐,最后决定还是自己写个吧!(其实我挺蠢的走了好多的弯路,哎~) 1.首先准备一个需要大家tomcat的工程,然后使用id ...

  7. DE1_MSEL

    基础的一般实验:01001(现在用的)或10010 马上换linux,做个记录: sd卡启动linux系统时,启动开关0至4位拨至00000

  8. 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...

  9. EF CodeFirst数据注解特性详解

    数据注解特性是.NET特性,可以在EF或者EF Core中,应用于实体类上或者属性上,以重写默认的约定规则. 在EF 6和EF Core中,数据注解特性包含在System.ComponentModel ...

  10. iframe宽高自适应

    iframe子页面结尾添加本script iframe子页面结尾添加本script <script type="text/javascript">         fu ...