JavaScript动态添加行，删除行，添加文本框

最新推荐文章于 2024-09-02 17:34:07 发布
最新推荐文章于 2024-09-02 17:34:07 发布
阅读量467 收藏
点赞数
分类专栏： JavaScript和JQuery 文章标签： javascript table button function input border

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table test</title>
</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
<tbody>
  <tr>
    <td>00</td>
    <td>01</td>
    <td>02</td>
    <td>03</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
  </tr>
  <tr>
    <td>30</td>
    <td>31</td>
    <td>32</td>
    <td>33</td>
  </tr>
  <tr>
    <td>40</td>
    <td>41</td>
    <td>42</td>
    <td>43</td>
  </tr>
</tbody>
</table>
<br/>
<input type="button" value="删除一行" οnclick="deleteRow()"/>  
<input type="button" value="删除一列" οnclick="deleteColumn()"/>
<p>
=====================
</p>
<input type="button" value="addrow" οnclick="addrow()" />
<input type="button" value="delrow" οnclick="delrow()" />
<div id="tableTest">
</div>
</body>
</html>
<script language="JavaScript" type="text/javascript">
function addrow()
{
var tab=document.getElementById("table2");
var _tr=tab.insertRow(tab.rows.length);
//创建八列
for(var j=0;j<8;j++){
var _td=_tr.insertCell(j);
//var _tn=document.createTextNode(i.toString()+j.toString());
var t=document.createElement("input");
t.size=20;
t.value="aaaaa";
_td.appendChild(t);
}

}
function delrow()
{
var tab=document.getElementById("table2");
tab.deleteRow(tab.rows.length-1);
}
<!--
//获取容器div的引用
var container=document.getElementById("tableTest");
//创建表格对象
var _table=document.createElement("table");
_table.id="table2";
//设置表格属性
_table.setAttribute("border","1");
_table.setAttribute("borderColor","black");
_table.setAttribute("width","200");
//创建一行
for(var i=0;i<1;i++){
var _tr=_table.insertRow(i);
//创建八列
for(var j=0;j<8;j++){
var _td=_tr.insertCell(j);
//var _tn=document.createTextNode(i.toString()+j.toString());
var t=document.createElement("input");
t.size=20;
_td.appendChild(t);
}
}
//将表格显示于页面
container.appendChild(_table);
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
//获得表格对象
var _table=document.getElementById("table1");
//定义函数，用于删除第一行
function deleteRow(){
_table.deleteRow(0);
}
//定义函数，用于删除第一列
function deleteColumn(){
//删除一列时需要对每一行分别进行列删除
for(var i=0;i<_table.rows.length;i++){
_table.rows.deleteCell(0);
}
}
//-->
</script>

day_day_day_up
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript动态添加文本框
Index.html
03-04 5664
document.getElementById('new').onclick = function() { var input = document.createElement('input'); var tr = document.createElement('tr'); var td = document.createElement('td');
JS动态添加行
s853562285的专栏
08-22 482
function id(id) { return document.getElementById(id); } var count = 1; function addRow(){ var tableObj = id("testTable"); var rowObj = tableObj.insertRow(-1); rowObj.setAttribute("id","newRow"); v
html动态添加删除文本框,DOM动态添加与删除元素
weixin_29197051的博客
06-03 629
动态的增加和删除元素在很多地方都需要用到，比如有时候需要大量数据收集的时候，我们就需要动态增加form表单等。下面是一个例子：效果演示动态添加用户添加新的用户名用户信息JavaScript代码DOM-动态添加和删除元素body,td,caption,input{ font-size:12px; }.test { border-collapse:collapse; }.test td { borde...
html 动态文本框的值,HTML Javascript动态添加和删除文本框
weixin_29466339的博客
06-03 430
我正在尝试使用javascript和HTML动态添加和删除文本框.我可以添加和删除它,但有时“删除”按钮不起作用.当我检查元素时,它说删除按钮没有onclick值.我不明白为什么在添加功能中设置onclick时的原因.这是我的代码： Requirements var reqs_id = 0;function removeElement(elementId,elementId2) {// Remov...
html动态添加删除文本框,JavaScript 动态删除/添加HTML表单元素
weixin_28363123的博客
06-03 316
这是一个利用JavaScript动态添加/删除HTML元素的实例，这里被动态添加、删除的是表单元素，一个文件上传域，使用JS控制自动添加，你一些邮箱添加附件的功能一样，同时也可以动态删除，比较常用了动态添加/删除HTML元素var count= 0 ;var maxfile = 5;增加元素function addUpload() {if(count >= maxfile) retur...
JavaScript 动态添加表格行 使用模板、标记
10-29
标题：“JavaScript 动态添加表格行 使用模板、标记”描述了在客户端使用JavaScript技术动态地向网页表格中添加新的行的操作方法。在Web开发中，经常需要在不重新加载页面的情况下动态更新表格内容，JavaScript提供...
js添加删除行和双击变文本框的脚本
10-30
然后，通过JavaScript添加`insert`和`del`方法来动态地管理表格行。对于双击变文本框的功能，可以在表格单元格中绑定双击事件： ```javascript document.getElementById('myTable').addEventListener('dblclick', ...
原生JS和JQuery动态添加、删除表格行的方法
10-24
### 原生JS和JQuery动态添加、删除表格行的方法知识点 #### 知识点一：原生JavaScript动态添加表格行 在原生JavaScript中，动态添加表格行可以通过获取表格对象，然后使用`insertRow`和`insertCell`方法来实现。`...
javascript 动态添加/删除 文本框
02-18
可以动态的添加 删除 文本框！代码几乎不用修改就直接能用，简单方便
JQuery实现表格动态增加行并对新行添加事件
10-25
在新行的文本框中，我们需要为`timepicker`功能做初始化，例如`$('#inputID').timepicker(options)`，这会在输入框上添加日期时间选择器。 4. **CSS样式**： - 提供的HTML源码中包含了CSS样式，用于美化表格，例如...
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 173
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 361
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
Vue双向绑定
m0_56131422的博客
09-01 595
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1055
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2389
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1296
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 735
vue.js 3
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 417
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue part 5
E___V___E的博客
08-29 896
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
JS动态表格操作：添加、删除行及实时求和示例
在本文档中，我们将深入探讨如何通过JavaScript实现在网页表格中动态添加和删除行，以及利用`onkeyup`事件实时计算总和的功能。首先，让我们了解动态操作表格的基本概念。 动态添加和删除行在前端开发中是非常实用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值