今天同事问了我一个问题，为表格添加新的行，我用的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. go语言 base58编码解码

    package main import ( "bytes" "encoding/hex" "fmt" "math/big" ...

  2. 酸菜鱼的 DP动态规划 刷题记录

    BZOJ1026: [SCOI2009]windy数 数位dp.很多小细节... 代码: #include <bits/stdc++.h> using namespace std; typ ...

  3. 题解【AcWing95】费解的开关

    题面 一道非常好的递推练习题. 我们考虑每次枚举第一行的操作,由上一行的状态递推出下一行的状态,最后判断最后一行是否全部为 \(1\) 即可. 实现代码时要注意一些细节问题. #include < ...

  4. 我的第一个Maven Helloworld

    使用MAVEN创建项目可以有两种方式进行创建,第一种,使用mvn命令创建Maven项目,第二种,使用eclipse创建Maven项目. 在创建Maven项目之前,我们需要安装maven,并和配置JDK ...

  5. （转）最小Hash和局部敏感Hash

    转自:http://www.07net01.com/2015/08/907327.html 在数据挖掘中,有一个比较基本的问题,就是比较两个集合的相似度.关于这个问题,最笨的方法就是用一个两重循环来遍 ...

  6. python3练习100题——037

    原题链接:http://www.runoob.com/python/python-exercise-example37.html 题目:对10个数进行排序. 程序分析:可以利用选择法,即从后9个比较过 ...

  7. python3运行调用htmltestrunner时，报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 0

    之前解决过一次,又忘了,这次写下来了..百度没有的,跟我环境有关! 环境:自动化运行环境python3.6.5 上期说到了,写了一个bat来运行runallcase.py. 但是双击运行却报错:Uni ...

  8. react 渲染

    目录 React渲染 createElement的三个参数 element如何生成真实节点 ReactDOMComponent 作用 ReactCompositeComponentWrapper 作用 ...

  9. R Tidyverse dplyr包学习笔记2

    Tidyverse 学习笔记 1.gapminder 我理解的gapminder应该是一个内置的数据集 加载之后使用 > # Load the gapminder package > li ...

  10. spring微服务实战 - 1 一个完整的HTTP JSON REST服务

    import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.Spr ...