您的位置：首页 > Web前端 > JavaScript

JavaScript动态追加/删除输入框基本实现方式

2017-12-05 00:00 579 查看

一、前言

网页中大部分涉及到静态表单输入，但有时候也会涉及到动态追加输入框的情况。

二、操作流程与实现方式

1、Html表式结构：table与隐藏（用来复制）的tr，增加按钮伴随table，删除按钮伴随td。

<table id="appendTab">
<tr>
<td>名称</td>
<td><a href="javascript:void(0);" onclick="appendTr()">增加</a></td>
</tr>
<tr id="appendTr" style="display: none;">
<td><input type="text" name="appendInput"/></td>
<td><a href="javascript:void(0);" class="stat-btn1" style="background: red;border: 1px solid red;" onclick="deleteTr(this)">删除</a></td>
</tr>
</table>

2、复制隐藏tr，追加trNum为classId（方便对特定tr进行操作）。追加关键：最后一个tr的classId序号递增为准（防止删除后再追加的覆盖问题）

function appendTr () {
var $appendTr = $('#appendTr');
var $appendTable = $('#appendTab');
var trNum = $appendTable.find('tr').length;
// 2为未进行增加的tr数量
if (!!($.trim(trNum)) && trNum != 2) {
var lastTrNum = $appendTable.find('tr:last').attr('class');
trNum = parseInt(lastTrNum.substring(8, lastTrNum.length)) + 1;
}
var copyTr = $appendTr.clone().addClass('appendTr' + trNum).removeAttr('id').css('display', '');
$appendTable.append(copyTr);
}

function deleteTr(target){
$(target).parent().parent().remove();
}

3、遍历所有显示的tr：可为隐藏的tr赋值相同的属性（用于遍历）

// 追加type等于append属性
<tr type="append" style="display:none">
</tr>

// 遍历所有显示的tr
$("tr[type='append']:visible").each(function(index,element){});

三、知识拓展

$(#obj).append()追加到obj标签之后

$(#obj).prepend()追加到obj标签之前

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航