`
shonghuanc
  • 浏览: 84327 次
文章分类
社区版块
存档分类
最新评论

js表新增行

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<div id="initt"><input type="text" value="0.0" readonly >到<input type="text" value="无穷" readonly ><br /></div>
<div id="normal" style="display:none;">
<input type="text" value="0.0" readonly >到<input type="text"><br />
<table id="t"></table>
<input type="text">到<input type="text" value="无穷" readonly ><br />
</div>
<input type="button" value="add" onclick="add()"> 
<input type="button" value="清空" onclick="delall()">
<script>
var trs = 1;
var ids = 1;

function add(){
  document.getElementById("initt").style.display = "none";
  document.getElementById("normal").style.display = "";
 
  if (trs > 1){
    var trr = document.getElementById("t").insertRow(document.getElementById("t").rows.length);
    trr.id = 'tr'+ids;
    var tdo = trr.insertCell();
    tdo.innerHTML = "<input type='text' />到<input type='text' />";
    tdo.innerHTML += " <input type='button' value='delete' onclick=\"del('tr"+ids+"')\">";
  }
 
  ids++;
  trs++;
}

function del(tdo){
  //document.getElementById("t").deleteRow(tdo.parentElement.id);
  document.getElementById("t").deleteRow(document.getElementById(tdo).rowIndex);
  trs--;
}

function delall(){
  document.getElementById("initt").style.display = "";
  document.getElementById("normal").style.display = "none";
}
</script>
</BODY>
</HTML>
分享到:
评论

相关推荐

    JS实现点击按钮表新增一行

    JS实现点击按钮表新增一行

    EXT动态新增一行

    EXT,全称EXT JS,是一种基于JavaScript的富客户端框架,由Sencha公司开发,用于构建交互性强、功能丰富的Web应用程序。在EXT中,"动态新增一行"是指在表格或者布局中,通过用户操作(比如点击按钮)来动态地添加新...

    LayUI table新增空白行

    要实现新增空白行,我们需要对LayUI的`tables.js`文件进行深入研究,找到数据渲染的代码段,然后在此基础上添加自定义逻辑。通常,当表格渲染数据时,我们可以通过监听`layEvent`事件,比如`done`事件,来在数据加载...

    js动态添加行和删除行

    在JavaScript中,动态添加行和删除行是网页交互中常见的需求,特别是在表格或者列表展示数据时。这通常涉及到DOM操作,包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点: 1. DOM操作: - `...

    动态新增行并取出所有数据

    动态新增行的核心实现技术通常涉及到前端的JavaScript(或其库如jQuery)以及后端的数据处理。在前端,当用户点击“添加行”按钮时,JavaScript代码会动态创建新的HTML表单行,并将其插入到表格中。这包括生成新的...

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    在JavaScript编程中,实现动态添加和删除表格行是一项常见的需求,尤其在构建数据表或配置界面时。这个功能包括在表格中添加新行、删除现有行,并确保在操作过程中序号自动生成和更新。以下是对这个"js实现添加删除...

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    spreadjs_动态添加表头及数据绑定-demo.zip

    标题“spreadjs_动态添加表头及数据绑定-demo.zip”所指的,是使用SpreadJS库创建的一个示例,该示例演示了如何在JavaScript环境中动态地添加表格表头并实现数据绑定。SpreadJS是一款强大的JavaScript电子表格组件,...

    LayUI 数据表增加数据行Demo (Html)

    本示例将详细介绍如何在LayUI数据表中实现新增数据行的功能。 首先,我们需要引入LayUI的CSS和JS库。在HTML头部引用以下代码: ```html &lt;script src="layui/layui.all.js"&gt; ``` 接下来,我们创建一个基本的数据...

    JavaScript ES6新增特性

    JavaScript ES6新增特性

    js操作table元素,表格的行列新增、删除汇集.txt

    根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`&lt;table&gt;`元素,尤其是对表格的行(`&lt;tr&gt;`)和列(`&lt;td&gt;`或`&lt;th&gt;`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...

    纯javascript增加删除表格行

    2. **新增行**:要向表格添加新行,首先需要创建一个`&lt;tr&gt;`元素,然后为该行添加单元格(`&lt;td&gt;`)。这可以通过`document.createElement()`方法实现,最后使用`appendChild()`将新行添加到表格的`&lt;tbody&gt;`元素中。...

    javascript 动态创建表格:新增、删除行和单元格.zip

    本压缩包中的"javascript 动态创建表格:新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先,我们要理解表格在HTML中的基本结构,它由`&lt;table&gt;`元素包含,内部包含`...

    c#中GridView新增一行,jQuery实现对数据增删改查

    在提供的文件中,"GridView新增一行.doc"和"GridView新增一行2.txt、3.txt"可能包含了关于如何在GridView中添加新行的详细步骤和代码示例,而"jQuery增加一行.txt"则可能涵盖使用jQuery进行数据操作的实践指导。...

    bootstrap table单元格新增行并编辑

    在这里,我们将使用 JavaScript 代码来实现新增行的功能。 首先,我们需要在 HTML 文件中添加一个表格元素,并使用 Bootstrap Table 的 CSS 文件来美化表格的样式。 ```html &lt;th&gt;Key &lt;th&gt;Value &lt;!-- ...

    ASP.NET—005:GridView增加一行JS实现

    在“ASP.NET—005:GridView增加一行JS实现”这个主题中,我们将深入探讨如何使用JavaScript动态地在GridView中添加一行数据。 首先,了解JavaScript的基本概念至关重要。JavaScript 是一种解释型、弱类型的脚本...

    JavaScript学员项目管理系统.zip

    登入接口(新增手机验证码登入) 手机登入 失败返回值 用户名登入 微信扫码登入(new) socket.io事件 接口 获取二维码url 微信登入 微信登入流程图 退出登入接口 上传用户头像接口,注意把服务器端口改为443 校验登入...

    表格动态增加行www.bbssa.com

    JS给表格动态增加行的代码学习JS的新手必看www.bbssa.com

    JavaScript(ES6新增、W3C、MDN)最新参考手册.zip

    2. **微软JavaScript手册js.chm** - 微软的JavaScript手册可能会从微软的视角深入解析JavaScript,尤其是与Internet Explorer或Edge浏览器相关的兼容性问题和优化技巧。它可能涵盖了基本语法、BOM(浏览器对象模型)...

    js表格操作,DOM实现数据动态增删查改

    在本主题"js表格操作,DOM实现数据动态增删查改"中,我们将深入探讨如何使用原生JavaScript通过DOM操作来实现数据在表格中的动态管理。 1. **创建表格**:首先,我们需要在HTML中创建一个基础的表格结构。这通常...

Global site tag (gtag.js) - Google Analytics