Body部份：
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
<tr id="trHeader">
<td width="27" bgcolor="#96E0E2">序号</td>
<td width="64" bgcolor="#96E0E2">用户姓名</td>
<td width="98" bgcolor="#96E0E2">电子邮箱</td>
<td width="92" bgcolor="#96E0E2">固定电话</td>
<td width="86" bgcolor="#96E0E2">移动手机</td>
<td width="153" bgcolor="#96E0E2">公司名称</td>
<td width="57" align="center" bgcolor="#96E0E2"> </td>
</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" />
<input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
</div>
JS代码部份
<script language="javascript">// Example: obj = findObj("image1");
function findObj(theObj, theDoc){ var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj;}
//添加一个参与人填写行
function AddSignRow(){//读取最后一行的行号，存放在txtTRLastIndex文本框中
var txtTRLastIndex = findObj("txtTRLastIndex",document);
var rowID = parseInt(txtTRLastIndex.value);
var signFrame = findObj("SignFrame",document);
//添加行
var newTR = signFrame.insertRow(signFrame.rows.length);
newTR.id = "SignItem" + rowID;
//添加列:序号
var newNameTD=newTR.insertCell(0);
//添加列内容
newNameTD.innerHTML = newTR.rowIndex.toString();
//添加列:姓名
var newNameTD=newTR.insertCell(1);
//添加列内容
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";
//添加列:电子邮箱
var newEmailTD=newTR.insertCell(2);
//添加列内容
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";
//添加列:电话
var newTelTD=newTR.insertCell(3);
//添加列内容
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />";
//添加列:手机
var newMobileTD=newTR.insertCell(4);
//添加列内容
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />";
//添加列:公司名
var newCompanyTD=newTR.insertCell(5);
//添加列内容
newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />";
//添加列:删除按钮
var newDeleteTD=newTR.insertCell(6);
//添加列内容
newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";
//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString() ;
}
//删除指定行
function DeleteSignRow(rowid){
var signFrame = findObj("SignFrame",document);
var signItem = findObj(rowid,document);
//获取将要删除的行的Index
var rowIndex = signItem.rowIndex;
//删除指定Index的行
signFrame.deleteRow(rowIndex);
//重新排列序号，如果没有序号，这一步省略
for(i=rowIndex;i<signFrame.rows.length;i++){
signFrame.rows[i].cells[0].innerHTML = i.toString();
}
}//清空列表
function ClearAllSign(){
if(confirm('确定要清空所有参与人吗？')){
var signFrame = findObj("SignFrame",document);
var rowscount = signFrame.rows.length;
//循环删除行,从最后一行往前删除
for(i=rowscount - 1;i > 0; i--){
signFrame.deleteRow(i);
}
//重置最后行号为1
var txtTRLastIndex = findObj("txtTRLastIndex",document);
txtTRLastIndex.value = "1";
//预添加一行
AddSignRow();
}
}
</script>
例一
<HTML>
<HEAD>
<TITLE> 测试Select</TITLE>
<script>
function addItem()
{
var txt=document.all("txt").value;
if(txt!="")
{
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text=txt;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value =document.myForm.mySelect.length;
}
else
{
alert("请填写内容");
}
}
</script>
</HEAD>
<BODY>
<form name="myForm">
<SELECT NAME="mySelect" multiple="multiple">
<option value="1">item1</option>
</SELECT></form>
内容:<input type="text" size=20 name="txt" id="txt"><br>
<input type="button" name="addBtn" value="添加内容" onClick="addItem();">
</BODY>
</HTML>
例二
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<input type="button" name="btn" value="添加一行" onClick="addrow()">
<table id="activeTable" style="border: #000000 solid 1px;" cellspacing="0" width="100%" cellpadding="0">
<caption>請 求 内 訳</caption>
<tr>
<td nowrap>請求月</td>
<td nowrap>計上月</td>
<td nowrap>請求件名</td>
<td nowrap>入金期限日</td>
<td nowrap>金額</td>
<td nowrap>消費税</td>
<td nowrap>備考</td>
<td nowrap>操作</td>
</tr>
<table>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function addrow() {
var row = activeTable.insertRow(activeTable.rows.length);
var col = row.insertCell(0);
var i = row.rowIndex;
col.innerHTML = '<input name="seituki1" size="2"><input name="seituki2" size="2">';
col = row.insertCell(1);
col.innerHTML = '<input name="keituki1" size="2"><input name="keituki2" size="2">';
col = row.insertCell(2);
col.innerHTML = '<input name="kenmei" size="18" value="">';
col = row.insertCell(3);
col.innerHTML = '<input name="kigen" size="17">';
col = row.insertCell(4);
col.innerHTML = '<input name="kingaku1" size="15" style="text-align: right">';
col = row.insertCell(5);
col.innerHTML = '<input name="zei1" size="13" style="text-align: right">';
col = row.insertCell(6);
col.innerHTML = '<input name="bikou1" value="' + i + ' " size="15">';
col = row.insertCell(7);
col.innerHTML = '<button onClick="delrow()">删除本行</button>';
}
function delrow () {
var srcName = document.getElementsByTagName("button");
var rowIndex = 0;
for ( i=0;i<srcName.length;i++){
if(srcName[i]==event.srcElement)
rowIndex=i;
}
activeTable.deleteRow(rowIndex + 1);
}
</script>
例三
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>made by meixx</title>
<script language="javascript">
<!--
function Add(ObjSource,ObjTarget){
for(var i=0;i<ObjSource.length;i++){
if(ObjSource.options[i].selected){
var opt=document.createElement("OPTION");
ObjTarget.add(opt);
opt.value=ObjSource.options[i].value;
opt.text=ObjSource.options[i].text;
ObjSource.options.removeChild(ObjSource.options[i--]);
opt.selected=true;
}
}
}
function AddAll(ObjSource,ObjTarget){
SelectAll(ObjSource);
Add(ObjSource,ObjTarget);
}
function SelectAll(ObjSource){
for(var i=0;i<ObjSource.length;i++){
ObjSource.options[i].selected=true;
}
}
function doSubmit(){
SelectAll(frmDisplay.dltTarget);
//frmDisplay.action="";//设置form 提交的action
alert(frmDisplay.action);
//frmDisplay.submit();//取消注释即可,提交上去的options
}
//->
</script>
</head>
<body>
<table width="350" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<select name="dltSource" size="10" multiple style="width:100% ">
<option value="0">辽宁</option>
<option value="0">黑龙江</option>
<option value="0">吉林</option>
<option value="0">河北</option>
<option value="0">河南</option>
<option value="0">江苏</option>
<option value="0">浙江</option>
<option value="0">海南</option>
<option value="0">福建</option>
<option value="0">山东</option>
<option value="0">青海</option>
<option value="0">宁夏</option>
<option value="0">内蒙古</option>
<option value="0">新疆</option>
<option value="0">陕西</option>
</select>
</td>
<td width="50" valign="middle">
<p style="width:100%" align="center"><input type="button" value="->" onClick="Add(document.all.dltSource,frmDisplay.dltTarget)" title="添加"></p>
<p style="width:100%" align="center"><input type="button" value="=>" onClick="AddAll(document.all.dltSource,frmDisplay.dltTarget)" title="添加全部"></p>
<p style="width:100%" align="center"><input type="button" value="<-" onClick="Add(frmDisplay.dltTarget,document.all.dltSource)" title="删除"></p>
<p style="width:100%" align="center"><input type="button" value="<=" onClick="AddAll(frmDisplay.dltTarget,document.all.dltSource)" title="删除全部"></p>
</td>
<td width="150">
<form id="frmDisplay" action="xxx.jsp" method="post" style="margin:0 ">
<select name="dltTarget" size="10" multiple style="width:100% "></select>
</form>
</td>
</tr>
<tr>
<td align="center">作者:梅雪香</td>
<td align="center">ver:1.0</td>
<td align="center">
<input type="reset" onClick="javascript:window.location.reload();" value="重置">
<input type="button" value="提交" onClick="doSubmit()">
</td>
</tr>
</table>
</body>
</html>
例四
<table id="tab" width="200" height="70" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
<tr><td>第四行</td></tr>
</tbody>
</table>
<br>
<button onClick="del()">删除行</button>
<script language="JavaScript">
function del(){
tab.firstChild.removeChild(tab.rows[1]) //这个firstChild是指<tbody>，删除第二行
tab.rows[0].parentElement.removeChild(tab.rows[0]) //用另一方法删除第一行
}
</script>
例五
<button onClick="add()">add</button>
<button onClick="del()">del</button>
<button onClick="test()">test</button>
<table id="t1" border="1"></table>
<script language="JavaScript">
var n=0;
function add(){
n++;
t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+n+'"><button onclick="deleteRow(this)">delthis</button>';
//t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+t1.rows.length+'">';
}
function del(){
var c = document.getElementsByName('tt');
for(var i=0; i<c.length; i++)
if(c[i].checked)
t1.deleteRow(i);
}
function deleteRow(obj){
t1.deleteRow(obj.parentElement.parentElement.rowIndex);
}
function test(){
for(i=0;i<t1.rows.length;i++) alert(t1.rows[i].cells[0].innerHTML);
}
</SCRIPT>
分享到：
相关推荐
JavaScript动态级联下拉列表框是一种常见的前端交互设计，它允许用户在选择一个选项后，根据选择的结果动态更新下一个下拉列表框的内容。这种技术在数据筛选、表单填写等场景中广泛应用，能够提高用户体验，减少不必...
当我们谈论“动态添加删除TEXT框”，意味着我们需要在用户交互时动态地创建或移除这些文本输入字段。 1. **HTML基础**：HTML是网页内容的基础结构语言。在这里，我们需要创建一个基本的HTML框架，包括一个用于添加...
同时，列表框支持动态过滤，根据用户输入的搜索词筛选显示的项。 8. **性能优化** 当列表框包含大量项时，为了提高性能，可以考虑使用虚拟化技术，只在可视区域渲染项，或者利用异步加载策略分批加载数据。 总结...
本教程将深入探讨如何在程序运行时动态地向列表框添加和删除元素，这在创建交互式应用时非常实用。 首先，我们需要理解列表框的基本操作。在大多数编程语言中，列表框都有类似的方法来管理其项。例如，在C#或VB.NET...
本资源"JS实现可点击添加删除的下拉列表框多选标签控件源码.zip"提供了一个利用JavaScript实现的交互式下拉列表框，其中包含了多选功能以及标签展示的效果。这个控件允许用户不仅可以选择多个选项，还可以通过点击来...
4. **交互控制**：提供方法来动态添加、删除选项，或者获取当前选中的值。 5. **响应式设计**：确保控件在不同设备和屏幕尺寸上表现良好。 6. **错误处理**：处理可能出现的错误情况，如无效的选项或超出最大选择...
在本资源中，我们主要探讨的是一个纯JavaScript实现的高级列表功能，这通常涉及到左右两个列表框之间的数据交互。这个实现对于那些希望在不依赖任何外部库或框架的情况下，使用JavaScript增强网页用户界面的开发者来...
动态添加行指的是在用户执行特定操作（如点击按钮）时，通过JavaScript在页面上的表格或列表中插入新的行。这种功能在数据输入、展示可变数量的信息或者允许用户自定义内容的场景中非常实用。 首先，理解基本的HTML...
JavaScript 动态添加与删除Table行是网页交互中常见的需求，尤其在处理表格数据时，如用户管理、订单列表等场景。以下将详细介绍如何使用JavaScript实现这一功能。 首先，我们来看如何动态插入行。有两种常见的方式...
2. 动态添加/删除选项：根据需求，我们还可以使用JavaScript动态地向列表框添加或删除选项： ```javascript let newOption = document.createElement('option'); newOption.text = 'New Option'; selectBox.add(new...
本文实例讲述了JavaScript实现下拉列表框数据增加、删除、上下排序的方法。分享给大家供大家参考。具体如下： 这里实现在一个支持多选的下拉列表框内进行数据项的添加、删除、向上、向下移动操作，我们在一些人才...
结合JavaScript，我们可以动态地添加、删除或修改这些列的内容。 3. **类似QQ类列表框**：QQ列表框可能指的是具有相似用户体验和视觉效果的列表，比如具有可选中状态、悬停效果、滑动动画等。为了达到这种效果，...
"向左滑动删除列表，动态添加列表"这个功能是提升用户交互性和操作便捷性的一个常见特性，广泛应用于各种应用程序，如社交应用、邮件客户端以及任务管理工具等。下面将详细解释这个功能的实现原理和相关技术。 首先...
3. **添加选项**：通过方法向列表框中添加选项，如Tkinter的`insert`方法。 4. **绑定事件**：监听用户的交互，如选择事件，通常通过`bind`方法实现。 5. **显示列表框**：将其添加到窗口或容器中，以便用户可见。 ...
“联动输入”是指两个控件之间的一种交互方式，当在一个控件（如超级编辑框）中输入或选择内容时，另一个控件（如超级列表框）会根据输入的内容自动更新或过滤其显示的内容。这种联动可以实现快速的数据过滤和关联，...
根据给定的文件信息，下面将展开关于JavaScript对下拉列表框(select)操作的知识点讲解。 ### JavaScript对下拉列表框(select)操作详解 #### 一、基本操作 1. **获取下拉列表框的引用** 使用`document....
接着，深入学习 DOM 操作，了解如何在网页上添加、修改和删除元素。然后，学习 AJAX 的工作原理，包括创建和使用 XMLHttpRequest 对象。最后，实践编写 AJAX 请求，结合服务器端脚本，实现实际的交互功能。 **进阶...
1. DOM操作：通过Document Object Model (DOM) API，JavaScript可以查找、添加、删除或修改HTML元素，例如改变`<img>`标签的`src`属性来切换图片。 2. 事件监听：设置事件监听器来响应用户的操作，如点击按钮切换...
本文将详细探讨"jQuery动态添加删除分组插件"，以及如何结合用户分组和Bootstrap框架来实现高效且用户友好的界面。 首先，我们需要理解jQuery动态添加删除分组插件的核心功能。这个插件主要用于创建可动态增删的...