Javascript 多选传值
最近失业中，没事写个博客，主要介绍怎样通过Javascript 传递多个值实现订单的多选功能。
为了实现这个功能，我们需要两个页面：Default.aspx(父页面),product.aspx(子页面)。
父页面如图：
子页面如图：
实现功能：通过子页面的选择，添加项到父页面中。
整体思路：通过在子页面克隆父页面的表格结构，为其克隆的行赋值。
子页面的：HTML，JAVASCRIPT 代码。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Products.aspx.cs" Inherits="Products" %>
<!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 runat="server">
<title>无标题页</title>
<script type="text/javascript" language="javascript">
var edit=window.parent.document.getElementById("tableOnlineEdit");//取父页面的表ID
var idss=window.parent.document.getElementById("HiddleIds");
var strs='';//保存选择的值
var names=['product_name','product_ID','product_describe1','product_describe','amount','amount_unit','real_cost_price','type'];//添加的列集合。
//为父页面添加行。
function addGoodsItem(product_namea, product_IDa, product_describea, amounta, amount_unita,real_cost_pricea, typea)
{
var describe=product_describea;
var product_name=product_namea;
var amount_unit=amount_unita;
var type=typea;
var values=[product_name, product_IDa, describe, describe, amounta, amount_unit,real_cost_pricea, type];
if(checkRow(edit,values[0])) {
addInstanceRow(edit,names,values);
}
}
//根据唯一标志检查是否有重复记录
//表ID
function checkRow(objTable,unique)
{
var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];
for (var i=tbodyOnlineEdit.children.length-1; i>=0 ; i-- )
{
var temp=tbodyOnlineEdit.children[i].childNodes[1].childNodes[0].value;
if(unique==temp) return false;
}
return true;
}
//为父页面添加行
//父页面的表ID
//添加名称
//添加的值
function addInstanceRow(objTable,Names,Values)
{
var tbodyOnlineEdit=objTable.getElementsByTagName("TBODY")[0];//取得父页面的数据行。
var theadOnlineEdit=objTable.getElementsByTagName("THEAD")[0];//取得表头
var elm = theadOnlineEdit.lastChild.cloneNode(true)//克隆复制表头的最后一个子元素即一行。
elm.style.display="";//设置为显示。
if (tbodyOnlineEdit.children.length>0)
strs =strs.substring(0,strs .length-1)+';';
//循环遍历名称(即列)。
for(var i=0;i<Names.length;i++)
{
//设置值。
setInputValue(elm,Names[i],Values[i]);
}
idss.value=strs .substring(0,strs .length-1) ;
//加入表中。
tbodyOnlineEdit.insertBefore(elm);
}
//将指定数据行的objRow的输入域strName设置为strValue
//objRow 指定的行
//strName 列名,strValue 列值。
function setInputValue(objRow,strName,strValue)
{
var objs=objRow.all;
for(var i=0;i<objs.length;i++)
{
if(objs[i].name==strName){objs[i].value=strValue;}
if(strName=='product_describe1'&&objs[i].name=='product_describe_ok'){objs[i].innerHTML=strValue;}
}
strs+=strValue+',';
}
</script>
<style type="text/css">
#tableProducts
{
background-color: #FFFFFF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tableProducts" border="1" cellSpacing="0" bordercolor="#000000" bordercolorLight="#848284" bordercolorDark="#eeeeee" cellPadding="0" align="center" width="800px">
<thead>
<tr height="20" bgColor="#d2e9ff">
<td bordercolor="#dedbd6" width="13%" align="left">产品名称 </td>
<td bordercolor="#dedbd6" width="11%" align="left">产品编号 </td>
<td bordercolor="#dedbd6" width="13%" align="left">描述 </td>
<td bordercolor=#dedbd6 width="13%" align="left">单位 </td>
<td bordercolor=#dedbd6 width="11%" align="left">单价（元）</td>
<td bordercolor=#dedbd6 width="11%" align="left">选择</td>
</tr>
<tr>
<td bordercolor="#dedbd6" align="left">HP笔记本</td>
<td bordercolor="#dedbd6" align="left">20091101</td>
<td bordercolor=#dedbd6 align=left>HP公司出品商务笔记本</td>
<td bordercolor=#dedbd6 align=left>台</td>
<td bordercolor=#dedbd6 align=left>6500</td>
<td bordercolor=#dedbd6 align="left" style="cursor:hand;" onclick="addGoodsItem('HP笔记本','20091101','','1','','6500','物料')">选择</td>
</tr>
<tr>
<td bordercolor="#dedbd6" align="left">联想笔记本</td>
<td bordercolor="#dedbd6" align="left">20091102</td>
<td bordercolor=#dedbd6 align=left>联想公司出品商务笔记本</td>
<td bordercolor=#dedbd6 align=left>台</td>
<td bordercolor=#dedbd6 align=left>7500</td>
<td bordercolor=#dedbd6 align="left" style="cursor:hand;" onclick="addGoodsItem('联想笔记本','20091101','','1','','7500','物料')">选择</td>
</tr> <tr>
<td bordercolor="#dedbd6" align="left">acer笔记本</td>
<td bordercolor="#dedbd6" align="left">20091103</td>
<td bordercolor=#dedbd6 align=left>acer公司出品商务笔记本</td>
<td bordercolor=#dedbd6 align=left>台</td>
<td bordercolor=#dedbd6 align=left>8500</td>
<td bordercolor=#dedbd6 align="left" style="cursor:hand;" onclick="addGoodsItem('acer笔记本','20091103','','1','','8500','物料')">选择</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</form>
</body>
</html>
父页面的HTML代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>页面一</title>
<style type="text/css">
body
{
margin:0 auto;
font-size:15px;
}
ul
{
height:25px;
margin:0 auto;
border-bottom:1px #101010 solid;
}
.sub
{
float:left;
margin-left:200px;
}
ul li
{
list-style:none;
position:absolute;
}
.top
{
width:800px;
height:100%;
margin:10px auto;
border:1px #101010 solid;
}
</style>
<script type="text/ecmascript">
//全选。
function chkall()
{
var chk=document.getElementById("ckall");//取的全选
var checkboxs=document.getElementsByName("checkbox");
for (var i=0;i <checkboxs .length;i ++)
{
checkboxs [i ].checked=chk .checked;
}
}
//移除选中
function delSelect()
{
var checkboxs = document.getElementsByName("checkbox");
var table = document.getElementById("tableOnlineEdit");
var tr = table.getElementsByTagName("tr");
for (var i=0; i<checkboxs.length; i++) {
if(tr.length==2){
checkboxs[i].checked = false;
return;
}
if(checkboxs[i].checked==true){
removeTr(checkboxs[i]);
delsubValue(i);
i=-1;
}
}
}
//移除行
function removeTr(obj)
{
var sTr = obj.parentNode.parentNode;
sTr.parentNode.removeChild(sTr);
}
//移除提交服务器的值
function delsubValue(i)
{
var subvalue=document .getElementById("HiddleIds").value;
var subvalues=subvalue.split(";");
subvalues.splice(i-1,1 );
subvalue="";
for (var i=0;i <subvalues.length;i ++)
{
subvalue=subvalue+subvalues[i]+";";
}
document .getElementById("HiddleIds").value=subvalue.substring(0,subvalue.length-1);
}
//弹出页面窗口。
function dialog(title, url, w, h, approot, link,linktarget)
{
var titleheight = 25; // 提示窗口标题高度
var bordercolor = "#668899"; // 提示窗口的边框颜色
var titlecolor = "#404040"; // 提示窗口的标题颜色
var bgcolor = "#FFFFFF"; // 提示内容的背景色
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var msgObj = document.createElement("div");
msgObj.style.cssText = "position:absolute;font:11px '宋体';top:" + (document.documentElement.scrollTop + (iHeight - h) / 2) + "px;left:" + (document.documentElement.scrollLeft + (iWidth - w) / 2) + "px;width:" + w + "px;height:" + h + "px;text-align:center;border:1px solid " + bordercolor + ";background-color:" + bgcolor + ";padding:0;margin:0;z-index:102;";
document.body.appendChild(msgObj);
var titleBar = document.createElement("div");
titleBar.style.cssText = "width:" + (parseInt(w) - 27) + "px;height:" + (titleheight - 6) + "px;float:left;text-align:left;margin:0px;padding: 6px 0 0 10px;font:bold 13px '宋体';color:" + titlecolor + ";border:0px solid " + bordercolor + ";cursor:move;background:url(" + approot + "images/bt_bg.gif) repeat-x 0 0;";
titleBar.innerHTML = title;
msgObj.appendChild(titleBar);
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
titleBar.onmousedown = function() {
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);
document.onmousemove = function() {
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if (x > document.documentElement.scrollLeft && (x - document.documentElement.scrollLeft + w < iWidth) && y > document.documentElement.scrollTop && (y - document.documentElement.scrollTop + parseInt(h) < iHeight)) {
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
};
document.onmouseup = function() {
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
var closeBtn = document.createElement("div");
closeBtn.style.cssText = "float:left;width:17px;height:" + titleheight + "px;cursor:pointer; text-align:right; margin:0;padding:0;background:url(" + approot + "images/bt_bg.gif) repeat-x 0 0;";
closeBtn.innerHTML = "<span style='float:right;padding:0;margin: 0 10px 0 0; overflow:hidden;width:7px;height:" + titleheight + "px; background:url(" + approot + "images/bt_shut.gif) no-repeat 0 0;'> </span>";
msgObj.appendChild(closeBtn);
closeBtn.onclick = function() {
document.body.removeChild(msgObj);
}
closeBtn.childNodes[0].onmouseover = function() {
closeBtn.childNodes[0].style.background = "url(" + approot +"images/bt_shut.gif) no-repeat 0 -25px";
}
closeBtn.childNodes[0].onmouseout = function() {
closeBtn.childNodes[0].style.background = "url(" + approot + "images/bt_shut.gif) no-repeat 0 0";
}
var msgBox = document.createElement("div");
msgBox.style.cssText = "float:left;padding:0;margin:0;font:10pt '宋体';";
msgBox.colSpan = 3;
msgBox.innerHTML = "<iframe id=\"iframeurl\" style=\"width:" + w + "px; height:" + (parseInt(h) - 57) + "px;margin:0;padding:0 0 3px 0;\" src=\"" + url + "\" frameborder=\"0\" scrolling=\"auto\" ></iframe>";
msgObj.appendChild(msgBox);
var msgLink = document.createElement("div");
msgLink.style.cssText = "width:" + (parseInt(w) - 197) + "px;height:28px;float:left;line-height:28px;text-align:left; border-top: 1px;border-top-style: dashed; margin:0;padding:0 0 0 10px;";
if (link != null && link != "" && typeof (link) != 'undefined') {
msgLink.innerHTML = "<a onmouseover=\"this.style.color='red'\" onmouseout=\"this.style.color='black'\" style=\"color:#000;text-decoration:none;text-align:right;font-size:12px;height:23px;width:80px;\" href=\"" + link + "\" " + ((linktarget==null||linktarget==""||linktarget=="undefined")?"":"target='" + linktarget + "' ") + " >跳转到原始链接地址</a>";
}
msgObj.appendChild(msgLink);
var msgBtnOK = document.createElement("div");
msgBtnOK.style.cssText = "float:left;height:25px;text-align:right;border-top: 1px;border-top-style: dashed; padding:3px 0 0 0;margin:0; width:90px;";
msgBtnOK.innerHTML = "<input class=\"btnOk\" type=\"submit\" value=\"确 定\" style=\"background:url(" + approot + "images/btn.gif) repeat-x 0 0; border:1px solid #ACACAC;height:23px; width:80px;\" />";
msgObj.appendChild(msgBtnOK);
msgBtnOK.childNodes[0].onclick = function() {
document.body.removeChild(msgObj);
var url = window.location.href;
window.location.href = url;
}
var msgBtnCanle = document.createElement("div");
msgBtnCanle.style.cssText = "float:left;line-height:25px;height:25px;text-align:right;border-top: 1px;border-top-style: dashed; margin:0;padding:3px 7px 0 0;width:90px;";
msgBtnCanle.innerHTML = "<input class=\"btnCanal\" type=\"button\" value=\"取 消\" style=\"background:url(" + approot + "images/btn.gif) repeat-x 0 0; border:1px solid #ACACAC;height:23px; width:80px;\" />";
msgObj.appendChild(msgBtnCanle);
msgBtnCanle.childNodes[0].onclick = function() {
document.body.removeChild(msgObj);
}
// 获得事件Event对象，用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}
</script>
</head>
<body>
<form id="form1" runat="server" action="Default.aspx">
<div>
<div class="top">
<ul id="test">
<li><input type="checkbox" id="ckall" title="全选" value="全选" onclick="chkall()" /><label>全选</label></li>
<li><input type="button" style="margin-left:100px;" value="弹出子窗口" onclick="dialog('选择产品','products.aspx',810,400,'')" /></li>
<li class="sub" ><input type="button" value="删除选定" onclick="delSelect()" /></li>
<li class="sub" style="margin-left:300px;"><input type="submit" value="提交服务器" /></li>
//保存选择子页面选择的数据。
<li><asp:HiddenField ID="HiddleIds" runat="server" /></li>
</ul>
<table id="tableOnlineEdit" border="1" cellSpacing="0" bordercolor="#000000" bordercolorLight="#848284" bordercolorDark="#eeeeee" cellPadding="0" align="center" width="800px">
<thead>
<tr height="20" bgColor="#d2e9ff">
<td bordercolor="#dedbd6" width="11%" align="left">点选</td>
<td bordercolor="#dedbd6" width="13%" align="left">产品名称 </td>
<td bordercolor="#dedbd6" width="11%" align="left">产品编号 </td>
<td bordercolor="#dedbd6" width="13%" align="left">描述 </td>
<td bordercolor="#dedbd6" width="11%" align="left">数量</td>
<td bordercolor=#dedbd6 width="13%" align="left">单位 </td>
<td bordercolor=#dedbd6 width="11%" align="left">单价（元）</td>
<td bordercolor="#dedbd6" width="13%" align="left">小计（元）</td></tr>
<tr style="DISPLAY: none">
<td bordercolor="#dedbd6" align="left"><input style="width:80px;" id="checkLine" class="CHECKBOX_STYLE1" type="checkbox" name="checkbox"></td>
<td bordercolor="#dedbd6" align="left"><input style="width:80px;" class="input_STYLE4" onfocus="this.blur()" name="product_name"></td>
<td bordercolor=#dedbd6 align=left><input style="width:80px;" class="input_STYLE4" onfocus="this.blur()" name="product_ID"></td>
<td bordercolor=#dedbd6 align=left><SPAN style="WIDTH: 120px; BACKGROUND: #ffffff" name="product_describe_ok"></SPAN><input style="width:80px;" onfocus=this.blur() type=hidden name=product_describe></td>
<td bordercolor=#dedbd6 align=left><input style="width:80px;" value=21 name=amount></td>
<td bordercolor=#dedbd6 align=left><input style="width:80px;" onfocus=this.blur() name=amount_unit></td>
<td bordercolor=#dedbd6 align=left><input style="width:80px;" value=1 name=real_cost_price></td><input style="width:80px;" onfocus=this.blur() type=hidden name=type>
<td bordercolor=#dedbd6 align=left> </td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</form>
</body>
</html>
父页面服务器端代码：具体功能没有，主要是做了与服务器交互，主要用到一个隐藏控件保存选择的值。
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Page.RegisterStartupScript("", "<script>alert('"+this .HiddleIds .Value +"');</script>");
}
}
js 的代码注释比较详细，我就不做说明了。
代码比较多，希望需要的朋友能够看完，而不仅仅是把代码复制一下，所以我就不传源码了。需要的话可以，给我Email.
