今天同事问了我一个问题，为表格添加新的行，我用的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. 斜率优化 DP

    CF311B Cats Transport 暑假到现在终于过了这道题

  2. arm9特点

    ARM9主要特点 ARM 处理器凭借它的低功耗.高性能等特点,被广泛应用于个人通信等嵌入式领域,而ARM7 也曾在中低端手持设备中占据了一席之地.然而,ARM7 的处理性能逐渐无法满足人们日益增长的高 ...

  3. vue报错[Vue warn]: The data property "record" is already declared as a prop. Use prop default value instead.

    当我写了一个子组件,点击打开子组件那个方法时报了一个错 这句话说明意思呢?谷歌翻译一下↓ 数据属性“record”已声明为prop. 请改用prop默认值. 感觉翻译的有点怪,通过最后修改代码后大概意 ...

  4. [SUCTF 2019]EasySQL(堆叠注入配合sql_mode)

    考点:1.堆叠注入 2.set sql_mode=PIPES_AS_CONCAT;将||视为字符串的连接操作符而非或运算符 意外:注入* 复现: 1;set sql_mode=PIPES_AS_CON ...

  5. COS上传图片和显示图片

    写这篇文章之前,我也是刚刚实现COS上传和显示图片.我百度了好多相关文章,COS上传图片成功的文章不少,上传后显示图片的文章几乎没有.于是写一篇记录下. COS上传图片推荐链接:https://blo ...

  6. 一些docker资料汇总

    安装vmtools https://blog.csdn.net/qq_37764098/article/details/95538813 挂载vm共享文件夹 https://www.cnblogs.c ...

  7. js中迭代方法

    基础遍历数组:            for()            for( in )             for(var i = 0;i<arr.length;i++){       ...

  8. 问题解决：xampp中phpmyadmin“无法连接：无效的设置”

    背景: 在服务器上搭建Testlink测试管理系统,却在打不开phpmyadmin地址,无法设置数据库密码,后续步骤无法进行 (错误界面的图片忘记截取了┭┮﹏┭┮) 解决办法: 一:验证apache端 ...

  9. window使用pycharm远程连接服务器

    1.进入pycharm, File->Settings->Deployment下: 1.新加一个Server,type为SFTP,name自定义一个,例如UI自动化项目: 2.在SFTP ...

  10. 银行贷款利率低到“令人发指”，很多人还坚持借高利贷，why？

    编辑 | 于斌 出品 | 于见(mpyujian) 网络上,每隔一段时间,就会出现因为借了高利贷,家破人亡的新闻. 这种现象,层出不求,但其实,我们每次看了这些新闻,只是为其感到惋惜,并没有进一步去发 ...