js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）

最新推荐文章于 2022-09-17 22:39:54 发布
最新推荐文章于 2022-09-17 22:39:54 发布
阅读量1.2k 收藏 1
点赞数

怎样用js代码实现 动态增加标签，代码参考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>add_line</title> 
<script language="javascript" type="text/jscript"><!-- 

function add_input_file(tbfile, index) 
{ 
file_name = "file" + index; 
var tr_file = document.createElement("tr"); 
var td_file = document.createElement("td"); 
var input_file = document.createElement("input") 
input_file.setAttribute("type","file") 
input_file.setAttribute("size","50") 
input_file.setAttribute("name",file_name) 

td_file.appendChild(input_file) 
tr_file.appendChild(td_file) 
tbfile.appendChild(tr_file) 
} 
function add_one_file() 
{ 
var tb_file = document.getElementById("upload_file"); 
var count_file = document.getElementById("upload_file").childNodes.length; 
//window.alert(steps_nums); 
add_input_file(tb_file, count_file); 
} 

// --></script> 
</head> 
<body> 
<div style="text-align: center" style="text-align: center"> 
<form> 
<table width="90%"> 
<tr> 
<td> 
<BR /> 
<BR /> 
<h5>配置文件上传</h5> 
</td> 
</tr> 
<tr> 
<td> 
<table id="upload_file"> 
<tr class="tabletext"> 
<td><input type="file" name="job" size="50"/></td> 
</tr> 
<tr class="tabletext"> 
<td><input type="file" name='file2' size="50"/></td> 
</tr> 
<tr class="tabletext"> 
<td><input type="file" name='file3'size="50"/></td> 
</tr> 
</table> 
</td> 
</tr> 

<tr> 
<td align="left"> 
<input type="button" value="新增一行" οnclick="add_one_file()"/> 
<input type="submit" value="保 存"/> 
<input name="ciname" value="{{ciname}}"/> 
<input name="type" value="default"/> 
</td> 
</tr> 
</table> 
</form> 
</div> 
</body> 
</html> 

dw_java08
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js 面向对象 动态添加标签页 JS
Sole_Memory1的博客
09-01 632
<script> var that; class Tab { constructor(id) { // 获取元素 that = this; this.main = document.querySelector(id); this.add = this.main.querySelector('.tab...
js 动态添加标签
janfly79的博客
10-10 957
js 动态添加标签，简单易懂
通过js脚本实现动态添加HTML标签
11-23
一个简单的JS操作可以点击增加HTML标签
JQuery实现表格动态增加行并对新行添加事件
10-25
为了保持一致性，我们可以将这个过程封装在一个函数中，比如`addRow()`。 - 在表格的每个单元格中，可能需要包含按钮或其他输入元素，以便用户触发添加新行的事件。 2. **事件绑定**： - 在新行被添加后，我们...
react-add-table-dynamic-row:使用React Hook动态添加表行
05-26
- `TableRow`: 表格的每一行作为一个单独的组件，包含输入字段和可能的删除按钮。 - `AddButton`: 添加行的按钮，触发`handleAddRow`。 - `RemoveButton`: 删除行的按钮，触发`handleRemoveRow`（如果适用）。 ...
js 数组当前行添加数据方法详解
10-15
如果你想要在数组末尾添加一行数据，这是一个简单直接的选择。 ```javascript let array = [{name: '商品1', brand: '品牌1', unit: '个'}]; array.push({name: '商品2', brand: '品牌2', unit: '个'}); ``` 这...
JavaScript面向对象动态添加标签页 （ES6）
周百万的博客
09-17 1746
1、主要功能介绍： 将不同的功能抽离出来 1、 创建对象具有切换选项卡的功能 2、 创建对象具有添加选项卡的功能 3、 创建对象具有删除选项卡的功能 4、 创建对象具有修改选项卡内容的功能 5、动态获取、绑定元素、渲染UI界面
js动态创建标签实例
10-16
一个函数，实现js动态创建HTML的标签实例！ 步骤(思路) 1.先创建标签createtagname("div") 2.将标签添加到页面
table动态增加一行
08-29
table动态增加一行，点击增加可增加，点击删除可以进行删除
javascript动态添加一行数据和删除数据
10-28
利用javascript来结合html，可以动态的添加一行数据，和根据索引来删除一行数据。
JS动态添加标签
晴天小风的博客
08-16 2869
JS动态添加标签 如代码示例，使用jquery，动态的增加标签： function addDiv(serial) { //最外层父div var div = document.createElement("div"); document.getElementById("form").appendChild(div); ...
用JS动态添加标签
qq_40936181的博客
03-30 4483
有的业务会要求可以填写多行，一般就是那种一对多的业务，往往就会有这样的要求。比如说，我一笔报销，可能需要填写多条详情，那这时候开发人员在开发的时候，就需要提供给用户可以填写多行数据的功能。 添加一行的功能有多种实现方式，这里我主要总结下我在开发时候常用的两种。 一种是事先在页面写好添加一行的所有元素，然后隐藏；另一种是直接在JS写好然后再添加。 // 添加一行 <div class="insertHere"> <button type="button" onclick="a
js动态添加标签
wemoon2010的专栏
05-14 1315
var a1 = document.createElement("a"); //创建标签    //设置属性    a1.style.color="blue";     a1.innerText="google";     document.body.appendChild(a1); //添加到body 本来是要做个添加背景音乐到网页中去 但是无论动态js添加
js动态创建html标签
yeagoodidea的专栏
10-13 1788
<br /><script language="javascript"><br />var div = document.createElement("div");<br />/*<br />div.style.border = "1px red solid";<br />div.style.width = "100px";<br />div.style.height = "100px";<br />*/<br />div.className = "div";<br />div.innerHTML = "<
js动态添加标签（四）
Lonely
08-13 5341
在容器文本前后插入内容
JS面向对象动态添加标签页（梳理思路）
qq_46827043的博客
05-06 1485
自己梳理思路用的
js入门动态添加删除标签
weixin_33981932的博客
07-14 388
js、动态添加删除 运用下边几个标签实现动态创建标签，删除标签，大家要考虑的是内存里边发生的情况 createElemen创建元素； appendChild追加元素； parentNode返回指定节点的父节点； removeChild删除指定的元素节点。 第一步 HTML写法 <html> <head>...
el-tabel动态添加新增一行并保存行
最新发布
05-25
要动态添加一行并保存行，您需要使用JavaScript和HTML来实现此功能。以下是一个简单的示例： HTML代码： ``` <table id="myTable"> <tr> <td>行1列1</td> <td>行1列2</td> </tr> </table> <button onclick="addRow()">添加行</button> <button onclick="saveRow()">保存</button> ``` 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"; } function saveRow() { var table = document.getElementById("myTable"); var rows = table.rows; var data = []; for (var i = 0; i < rows.length; i++) { var cells = rows[i].cells; var rowData = []; for (var j = 0; j < cells.length; j++) { rowData.push(cells[j].innerHTML); } data.push(rowData); } // 将数据保存到后端 // ... } ``` 在addRow函数中，我们首先获取表格元素并使用insertRow方法添加一行。然后，我们在新行中使用insertCell方法添加两个单元格，并设置单元格内容。最后，在saveRow函数中，我们获取表格中所有行和单元格，将它们的内容存储在一个数组中，然后将数据发送到后端进行保存。 请注意，此示例仅演示了如何添加行和保存行，您可能需要根据您的具体需求进行修改和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值