Js实现简单的表格内容添加

最新推荐文章于 2024-06-08 14:45:00 发布
最新推荐文章于 2024-06-08 14:45:00 发布
阅读量1.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DeviL_MCry/article/details/90582755
版权

我们来用原装js来实现一个简单的表格内容添加

html代码

<body>
  <table border="1" width="200" height="30" id="table">
      <tbody id="tb">
          <tr>
              <td>青椒肉丝</td>
              <td>很好吃</td>
          </tr>
      </tbody>
  </table>
  <div id="nc">
  <span>昵称:</span><input type="text" value="" id="txt">
  </div>
  <div>
      <textarea name="" id="text" cols="30" rows="10"></textarea>
      <input type="button" value="添加" id="btn">
  </div>
</body>

css代码

<style>
      tr{
          text-align: center;
      }
        #table{
            margin-bottom: 20px;
        }
        #nc{
            margin-bottom: 20px;
        }
    </style>

js引用代码

// 通过id名获取的元素
function my$(id) {
    return document.getElementById(id);
}

//通过标签名获取的元素
function ele$(element) {
    return document.getElementsByTagName(element);
}

js代码

 window.onload=function(){
            var btn=my$("btn");
            btn.onclick=function(){
               var name=my$("txt").value;
               var ping=my$("text").value;
               var tr=document.createElement("tr");
               tr.innerHTML="<td>"+name+"</td>"+
                             "<td>"+ping+"</td>";
               var table=my$("table");
               var tbody=table.getElementsByTagName("tbody")[0];
               tbody.appendChild(tr);
            }
        }
    </script>
DeviL丨MCry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表格内容添加(js)
weixin_47340917的博客
06-14 3721
使用js对表格进行内容的增加效果图实现功能1.元素布局2.css设置样式3.js部分实现功能 效果图 实现功能 1.通过表单增加内容； 2.判断邮箱格式； 3.清空输入框 话不多说，直接上代码 1.元素布局 <div id="dv"> 姓名: <input type="text" id="uname" placeholder="请输入姓名"/> <br /> 邮箱: <input type="email
原生js操作table表格增删改查操作汇总
随手记的笔记
05-16 894
【代码】原生js操作table表格增删改查操作汇总。
js实现表格添加信息
woyaodangxiaodi的博客
12-21 775
js、表格添加信息
js动态实现表格添加和删除操作
Distance的博客
11-05 5295
运行效果如图（两种实现方案，被注释的是第一种实现方案） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ te...
js实现表格添加和删除功能
m0_61703542的博客
05-25 891
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
js实现添加删除表格
qq_48294048的博客
10-06 2013
效果: 1、 点击添加按钮往table中添加一行将全选前面的复选框变成false 1.1 、当前新增的复选框加上点击事件 2、 点击删除按钮获取表格体中被选中的行,删除整个tr,将全选前面的复选框变成false 获取的是第一个td中的checkbox的状态checked为true2层父子 3 、点击全选按钮前面的复选框如果被选中下面的每一个复选框都被选中如果不被选中下面的每一个复选框都不被选中 4、 点击每一个表格体中的复选框,如果所有的复选框都...
javascript动态添加删除表格
宋宋的博客
03-27 470
当页面中的按钮被点击时，创建一个包含4列的表格，并将其添加到具有id属性为“box”的元素中。每行包含一个单元格，分别显示用户输入的id、name和xb值，并且在最后一列包含一个带有“删除”链接的超链接。函数的作用是：从表格中删除包含所点击链接的行。获取链接的祖先元素，然后使用。方法从表格中删除该行。
Javascript动态添加表格行
Kitty_2的博客
08-31 792
1.首先要找到添加按钮代码，设置id选择器。
html+js实现动态添加表格及删除
PDyee的博客
10-25 1324
html+js实现动态添加表格及删除. 代码 <!--html中编写的部分--> <!--获取行和列的值 以及点击时的效果--> 行: <input type="text" id="getrow" /> 列: <input type="text" id="getcell" /> <button value="" onclick="change()">确定生成</button> </br>
在 Vue.js 中实现表格排序功能
热门推荐
weixin_44976692的博客
06-08 4万+
requestNum和，我们需要在columns数组中定义这些字段，并启用排序功能。data() {return {data: [],columns: [title: '请求数',},title: '响应时间',},],通过本文，我们了解了如何在 Vue.js 项目中实现一个具有排序功能的表格。我们使用 Ant Design Vue 组件库来构建表格，并通过定义和sortData方法来处理排序逻辑。希望这些示例和步骤能帮助你在自己的项目中实现类似的功能。
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
以下是如何使用JS实现动态表格的添加、修改和删除功能。 首先，我们需要在HTML页面中设置一个基本的表格结构。例如，给定的代码片段创建了一个表格，包含参数名称、参数编码、参数值和一个操作列。操作列通常用于...
JS实现为表格动态添加标题的方法
10-24
主要介绍了JS实现为表格动态添加标题的方法,涉及javascript中createCaption方法添加标题的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript简单表格编辑功能实现方法
12-03
本文将通过一个实例详细介绍如何使用JavaScript实现简单的表格编辑功能，包括插入行、删除行、插入单元格、删除单元格、创建表头以及删除表头等操作。 首先，我们需要一个包含表格的HTML结构。在示例中，我们有一个...
JS实现向表格中动态添加行的方法
12-01
本文实例讲述了JS实现向表格中动态添加行的方法。分享给大家供大家参考。具体分析如下： 下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行 <!DOCTYPE html> <html> <head> ...
Kettle、Spoon数据同步工具
08-03
Kettle、Spoon数据同步工具7.0版本 SQL Server、MySQL数据库jar包等
delphi教程案例项目资源
08-03
delphi教程案例项目资源
探索MATLAB替代品的API宝典：解锁编程新境界
最新发布
08-03
Matlab是由MathWorks公司开发的一款高性能的数值计算和可视化软件环境。它被广泛应用于工程计算、算法开发、数据分析、可视化、仿真以及其他数学和科学领域。Matlab的核心特点是其强大的矩阵操作能力，这使得它在矩阵计算和线性代数方面非常高效。 ### Matlab的主要特点包括： 1. **矩阵操作**：Matlab的语法是基于矩阵的，这使得进行复杂的矩阵运算变得简单直观。 2. **编程语言**：Matlab拥有自己的编程语言，支持变量、控制结构（如循环和条件语句）、函数和数据结构。 3. **数值计算**：提供广泛的数值分析功能，包括傅里叶分析、数值积分、微分方程求解等。 4. **符号计算**：Matlab的Symbolic Math Toolbox支持符号运算，可以进行符号微分、积分和方程求解等。 5. **数据可视化**：Matlab提供了丰富的图形和可视化工具，可以创建二维和三维图形、图表和动画。 6. **算法开发**：用户可以利用Matlab开发和测试算法，然后将其嵌入到其他应用程序中。 7. **模型仿真**：Matlab的Simulink提供了一个交互式
js表格实现添加、修改、删除
10-26
在前端开发中，使用JavaScript可以很方便地实现表格的添加、修改和删除功能。 1. 添加：可以通过JavaScript动态地创建新的表格行，并将新行插入到表格的末尾或是指定的位置。 例如，可以通过以下代码实现在表格的末尾添加一行： ```javascript function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(-1); // 在表格末尾添加一行 var cell1 = row.insertCell(0); // 插入新单元格 var cell2 = row.insertCell(1); cell1.innerHTML = "数据1"; // 在新单元格中填充内容 cell2.innerHTML = "数据2"; } ``` 2. 修改：可以通过JavaScript来修改指定表格行的内容。 例如，可以通过以下代码修改第一行的内容： ```javascript function modifyRow() { var table = document.getElementById("myTable"); var row = table.rows[0]; // 获取第一行 row.cells[0].innerHTML = "新数据1"; // 修改第一行的第一个单元格内容 row.cells[1].innerHTML = "新数据2"; // 修改第一行的第二个单元格内容 } ``` 3. 删除：可以通过JavaScript来删除指定的表格行。 例如，可以通过以下代码删除最后一行： ```javascript function deleteRow() { var table = document.getElementById("myTable"); var rowCount = table.rows.length; if (rowCount > 1) { // 至少保留一行 table.deleteRow(rowCount - 1); // 删除最后一行 } } ``` 以上就是使用JavaScript实现表格添加、修改和删除的简单示例。根据实际需求，可以根据表格的结构和内容进行相应的调整和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值