页面中不定项输入项的添加

需求：

      在做‘景点+门票’这种类型的业务的时候，景点和门票是1-N的关系，一般可以先插入一条景点信息，再在这条今天信息的基础上加入多个门票信息，但是产品人员设计的文档中是要求‘景点+门票’一起插入，如下图所示。好吧既然你们的文档都通过了经理审核，那咱们就只有照做了。

 

思路：

     其实用JavaScript可以很容易做到动态的效果，步骤如下：

1. DOM中开始时候没有任何门票类型，只有一个‘添加门票类型’的按钮，并且给这个按钮一个唯一的id标识(当然可以选择其他的方式，但是这个应该是代码最少的)。
2. 单击该按钮的时候触发添加一组输入框(每组输入框由一个包围标签包含，并且需要包含删除按钮)，所以这里为这个按钮的onclick事件编写一个函数。
3. 函数中一次：a.编写这组信息输入框的代码 b.找到添加按钮 c.将这组输入框插入到这个按钮的前面。
4. 点击删除按钮，触发删除函数(需要将这组输入框的包围标签的唯一的id标识传给删除函数)
5. 编写删除函数：a.根据id找dom元素 b.删除该元素和下面所有内容。
   

     效果如下图所示(尤其注意这里还有个删除按钮)

 

代码：

局部HTML如下

<!-- 添加的代码  -->
<tr id="addMark"><th></th><td><input type="button" onclick='addTicketType();' value="增加门票类型" title="增加门票类型" /> </td></tr>
<!-- 删除的代码 -->
<input type="button" onclick="delTicketType(${id},1);" title="删除该门票类型" />

 

这里用jQuery开发包，可以极大的缩短代码

//用于唯一标识新增的输入框的ID值的索引
var newTicketIndex = 0;

//添加信息输入框
function addTicketType(sceneryId) {
	var index = '"newTicket' + newTicketIndex +'"';
	//这里可以用DOM的方式，但是很多人还是习惯拼写HTML
	var content = "<tr id='newTicket"+newTicketIndex+"'><input type='button' onclick='delTicketType("+index+");' title='删除' /></tr>"
	$("#addMark").before(content);
	//每次添加后的索引值加1
	newTicketIndex = newTicketIndex + 1;
}

//删除信息输入框
function delTicketType(ticketId) {
	if(confirm("您确定要删除这条门票类型记录吗？删除后，无法恢复")){
		$("#"+ticketId).remove();
	}
}

 

上面演示的都是在景点添加功能时候的效果，如果是在修过的时候，门票列表本身就存在，当然添加额外的门票类型输入框组不需要大的修改，这里主要是删除的时候是不同的，需要跟后台的服务器进行交互。

 

局部HTML如下，${id}代表这个景点的ID

<!-- 添加的代码  -->
<tr id="addMark"><th></th><td><input type="button" onclick='addTicketType(${id});' value="增加门票类型" title="增加门票类型" /> </td></tr>
<!-- 删除的代码 -->
<input type="button" onclick="delTicketType(${id},1);" title="删除该门票类型" />

 

这里用jQuery开发包，可以极大的缩短代码，使用ajax进行后台交互来删除已经存在于数据库中的‘老的‘门票类型

//用于唯一标识新增的输入框的ID值的索引
var newTicketIndex = 0;

//添加信息输入框
function addTicketType(sceneryId) {
	var index = '"newTicket' + newTicketIndex +'"';
	//这里需要将景点ID写入到这组HTML代码中，因为在服务端的批量更新插入中需要用到
	var content = "<tr id='newTicket"+newTicketIndex+"'><input type='button' onclick='delTicketType("+index+");' title='删除' /></tr>"
	$("#addMark").before(content);
	//每次添加后的索引值加1
	newTicketIndex = newTicketIndex + 1;
}

//删除信息输入框，type用来标记是存在的
function delTicketType(ticketId,type) {
	if(confirm("您确定要删除这条门票类型记录吗？删除后，无法恢复")){
			$("#"+ticketId).remove();
		} else if(type == 1) {
			$.ajax({
				url:'delTicket.action',
				type:'post',
				data:'type=ch&ids=' + ticketId,
				dataType:'json',
				success: function(msg) {
					if (msg.error) {
						alert("删除失败");
					} else {
						alert("操作成功");
						var domId = "#oldTicket" + ticketId;
						$(domId).remove();
					}
				}
			});
		}
	}
}

 

附：

有的时候如果不使用jQuery，那么最为麻烦的就是需要自己手动编写一个插入在目标元素后面(本例是在前面)插入dom元素。这里是一个已经抽象过的可用代码（网络上很容易找到）：

function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

 

 

参考：

1. 《JavaSriptDOM编程艺术(第二版)》