我要的效果如下:左表格(下面是数据列) ||| 中间||| 右表格(为空)
待装车货物列表区 已装车货物列表区
-----------------------------------------------------------------
编号 姓名 货物 件数
1 A 鞋子 10 按钮A(>>)
2 B 茶叶 9
3 c 鞋架 3 按钮B( < <)
4 ... .... ....
双击左表格中的某一行 把它移动到右表格 如果右表格有数据 也可以移动到左边,要支持全选,支持按住shift、alt 移动
就像附件中的列表框所示的效果 但是只不过把列表框换成表格的形式,或者也可以在列表框中嵌入像左表格那样的形式也可以!!
HTML code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
html, body{
font-size:12px;
}
table{
border-collapse:collapse;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function getTable(row){
while(row && row.tagName.toLowerCase() != "table"){
row = row.parentNode;
}
return row;
}
function clickRow(row){
if(row.style.backgroundColor == ""){
row.style.backgroundColor = "#EEE";
}else{
row.style.backgroundColor = "";
}
}
function dblclickRow(row){
row.style.backgroundColor = "";
moveRow(row);
}
function moveRow(row){
var ts = getTable(row);
var td = null;
if(ts.id == "tbSource"){
td = $("tbDest");
}else{
td = $("tbSource");
}
td.getElementsByTagName("tbody")[0].appendChild(row);
}
function moveTable(id){
var tb = $(id);
var len = tb.rows.length;
for(var i=len-1; i>=0; i--){
if(tb.rows[i].style.backgroundColor != ""){
tb.rows[i].style.backgroundColor = "";
moveRow(tb.rows[i]);
}
}
}
window.onload = function(){
var tbSource = $("tbSource");
for(var i=0; i<tbSource.rows.length; i++){
tbSource.rows[i].onclick = function(){
clickRow(this);
};
tbSource.rows[i].ondblclick = function(){
dblclickRow(this);
};
}
};
</script>
</head><body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="260" border="1" cellspacing="0" cellpadding="6" id="tbSource">
<tr>
<td bgcolor="#CCCCCC"><strong>ID</strong></td>
<td bgcolor="#CCCCCC"><strong>姓名</strong></td>
<td bgcolor="#CCCCCC"><strong>货物</strong></td>
<td bgcolor="#CCCCCC"><strong>件数</strong></td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>D</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>E</td>
<td>87</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>F</td>
<td>4</td>
</tr>
</table></td>
<td align="center"><input type="button" name="btn1" id="btn1" value=" >> " onclick="moveTable('tbSource');" /><br /><br />
<input type="button" name="btn2" id="btn2" value=" << " onclick="moveTable('tbDest');" /></td>
<td align="center" valign="top">
<table width="260" border="1" cellspacing="0" cellpadding="6" id="tbDest">
<tr>
<td bgcolor="#CCCCCC"><strong>ID</strong></td>
<td bgcolor="#CCCCCC"><strong>姓名</strong></td>
<td bgcolor="#CCCCCC"><strong>货物</strong></td>
<td bgcolor="#CCCCCC"><strong>件数</strong></td>
</tr>
</table></td>
</tr>
</table></body>
</html>
待装车货物列表区 已装车货物列表区
-----------------------------------------------------------------
编号 姓名 货物 件数
1 A 鞋子 10 按钮A(>>)
2 B 茶叶 9
3 c 鞋架 3 按钮B( < <)
4 ... .... ....
双击左表格中的某一行 把它移动到右表格 如果右表格有数据 也可以移动到左边,要支持全选,支持按住shift、alt 移动
就像附件中的列表框所示的效果 但是只不过把列表框换成表格的形式,或者也可以在列表框中嵌入像左表格那样的形式也可以!!
HTML code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
html, body{
font-size:12px;
}
table{
border-collapse:collapse;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function getTable(row){
while(row && row.tagName.toLowerCase() != "table"){
row = row.parentNode;
}
return row;
}
function clickRow(row){
if(row.style.backgroundColor == ""){
row.style.backgroundColor = "#EEE";
}else{
row.style.backgroundColor = "";
}
}
function dblclickRow(row){
row.style.backgroundColor = "";
moveRow(row);
}
function moveRow(row){
var ts = getTable(row);
var td = null;
if(ts.id == "tbSource"){
td = $("tbDest");
}else{
td = $("tbSource");
}
td.getElementsByTagName("tbody")[0].appendChild(row);
}
function moveTable(id){
var tb = $(id);
var len = tb.rows.length;
for(var i=len-1; i>=0; i--){
if(tb.rows[i].style.backgroundColor != ""){
tb.rows[i].style.backgroundColor = "";
moveRow(tb.rows[i]);
}
}
}
window.onload = function(){
var tbSource = $("tbSource");
for(var i=0; i<tbSource.rows.length; i++){
tbSource.rows[i].onclick = function(){
clickRow(this);
};
tbSource.rows[i].ondblclick = function(){
dblclickRow(this);
};
}
};
</script>
</head><body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="260" border="1" cellspacing="0" cellpadding="6" id="tbSource">
<tr>
<td bgcolor="#CCCCCC"><strong>ID</strong></td>
<td bgcolor="#CCCCCC"><strong>姓名</strong></td>
<td bgcolor="#CCCCCC"><strong>货物</strong></td>
<td bgcolor="#CCCCCC"><strong>件数</strong></td>
</tr>
<tr>
<td>1</td>
<td>A</td>
<td>D</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>E</td>
<td>87</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>F</td>
<td>4</td>
</tr>
</table></td>
<td align="center"><input type="button" name="btn1" id="btn1" value=" >> " onclick="moveTable('tbSource');" /><br /><br />
<input type="button" name="btn2" id="btn2" value=" << " onclick="moveTable('tbDest');" /></td>
<td align="center" valign="top">
<table width="260" border="1" cellspacing="0" cellpadding="6" id="tbDest">
<tr>
<td bgcolor="#CCCCCC"><strong>ID</strong></td>
<td bgcolor="#CCCCCC"><strong>姓名</strong></td>
<td bgcolor="#CCCCCC"><strong>货物</strong></td>
<td bgcolor="#CCCCCC"><strong>件数</strong></td>
</tr>
</table></td>
</tr>
</table></body>
</html>
解决方案 »
- 为什么老提示变量没定义?
- js 报错 缺少对象 行1字符1
- ShowModalDialog函数打开一个子窗口能不能将关闭按钮设置为不可见
- 关于使用JS+DIV的方式,控制鼠标滑过显示和隐藏图层的问题?》
- 想用js写个像csdn博客上那样的日历,但没有思路,请大家指点下
- 急!高分请教:在自己页面上调用其他视频链接,但那个网站设置了cookies,使得一定要访问他的网页才行,如何解决?
- 关于IE是否真正打印的获取
- 怎样在onkenup事件中用正则表达式实现只能输入负号、数字、和一个小数点?并根据某一参数确定小数的位数
- 各位这里问一个简单的问题javascript有安全级别的限制吗?
- php如何获取js的变量数据
- 火狐中,执行innerHTML中脚本的问题
- 能不能单击按钮触发不同的事件
<td width="523" align=center valign="top">
<div align="center">待装车货物列表区:</div></td>
</tr>
<tr>
<td align=center valign="top"><div align="left">
<div style="width:100%;height:300;overflow-x:hidden;overflow-y:scroll">
<table width="100%" border="0">
<tr align="center">
<td width="34" height=20><div align="center">选择</div></td>
<td width="83" height=20><div align="center">交易单号</div></td>
<td width="78" height=20><div align="center">终到站</div></td>
<td width="72" height=20><div align="center">货号</div></td> </tr>
</table><table id="tb1" width="100%" border="0" cellpadding="0" cellspacing="0" >
<%
dim curpage, i
if request("page")="" then
curpage = 1
else
curpage = clng(request("page"))
end ifrs.pagesize = 100000
rs.absolutepage = curpage
for i = 1 to rs.pagesize
%>
<tr onmouseover="bgColor='#4474bb'" onmouseout="bgColor='#ffffff'" onDblClick="javascript:window.open('../baobiao/print.asp?jydbh=<%=base64Encode(rs("jydbh"))%>&companyid=<%=base64Encode(newcompanyid)%>','交易单详细信息','directorys=no,toolbars=no,status=no,menubars=no,scrollbars=no,resizeable=no,width=700,height=550,top='+(window.screen.height-550)/2+',left='+(window.screen.width-700)/2+'');">
<td width="39"> <input type="checkbox" name="chk_id" id="chk_id" align="center" value="<%=rs("hw_id")%>" > </td>
<td width="103"><%=rs("jydbh")%></td>
<td width="83"><%=rs("zdz")%> </td>
<td width="81"><%=rs("sxhh")%> </td>
</tr>
<% rs.movenext
if rs.eof then
i = i + 1
exit for
end if
next
%>
</table>
这是左边从数据库得到的记录集 移到右边后 获取不到hw_id啊??
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
html, body{
font-size:12px;
}
table{
border-collapse:collapse;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function getTable(row){
while(row && row.tagName.toLowerCase() != "table"){
row = row.parentNode;
}
return row;
}
function clickRow(row){
if(row.style.backgroundColor == ""){
row.style.backgroundColor = "#EEE";
}else{
row.style.backgroundColor = "";
}
}
function dblclickRow(row){
row.style.backgroundColor = "";
moveRow(row);
}
function moveRow(row){
var ts = getTable(row);
var td = null;
if(ts.id == "tbSource"){
td = $("tbDest");
}else{
td = $("tbSource");
}
td.getElementsByTagName("tbody")[0].appendChild(row);
}
function moveTable(id){
var tb = $(id);
var len = tb.rows.length;
for(var i=len-1; i>=0; i--){
if(tb.rows[i].style.backgroundColor != ""){
tb.rows[i].style.backgroundColor = "";
moveRow(tb.rows[i]);
}
}
}
window.onload = function(){
var tbSource = $("tbSource");
for(var i=0; i<tbSource.rows.length; i++){
tbSource.rows[i].onclick = function(){
clickRow(this);
};
tbSource.rows[i].ondblclick = function(){
dblclickRow(this);
};
}
};function saveTable(){
var form = document.getElementById("form1");
var inputs = form.getElementsByTagName("input");
var id = [];
for(var i=0; i<inputs.length; i++){
id.push(inputs[i].value);
}
if(id.length > 0){
alert(id.join(","));
form.submit();
}
}
</script>
</head><body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="260" border="1" cellspacing="0" cellpadding="6" id="tbSource">
<tr>
<td bgcolor="#CCCCCC"><strong>ID</strong></td>
<td bgcolor="#CCCCCC"><strong>姓名</strong></td>
<td bgcolor="#CCCCCC"><strong>货物</strong></td>
<td bgcolor="#CCCCCC"><strong>件数</strong></td>
</tr>
<tr>
<td><input type="checkbox" value="1" name="hw_id" />1</td>
<td>A</td>
<td>D</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" value="2" name="hw_id" />2</td>
<td>B</td>
<td>E</td>
<td>87</td>
</tr>
<tr>
<td><input type="checkbox" value="3" name="hw_id" />3</td>
<td>C</td>
<td>F</td>
<td>4</td>
</tr>
</table></td>
<td align="center">
<input type="button" name="btn1" id="btn1" value=" >> " onclick="moveTable('tbSource');" /><br /><br />
<input type="button" name="btn2" id="btn2" value=" << " onclick="moveTable('tbDest');" /><br /><br />
<input type="button" name="btnSave" id="btnSave" value="保存" onclick="saveTable()" />
</td>
<td align="center" valign="top">
<form id="form1" method="post" action="save.asp">
<table width="260" border="1" cellspacing="0" cellpadding="6" id="tbDest">
<tr>
<td bgcolor="#CCCCCC"><strong>ID</strong></td>
<td bgcolor="#CCCCCC"><strong>姓名</strong></td>
<td bgcolor="#CCCCCC"><strong>货物</strong></td>
<td bgcolor="#CCCCCC"><strong>件数</strong></td>
</tr>
</table>
</form>
</td>
</tr>
</table></body>
</html>