高分：一个老问题，如何从一个table复制到另外一个table

lonaerd 2005-04-03 11:02:46
我的要求是两个表格，其中Table_A里含有多选框的50个学生，现在要求选择多选框，则在Table_B中新插入一行，内容为Table_A选中的那一行，急需解决，谢谢！
...全文
201 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
boneeater 2005-04-11
  • 打赏
  • 举报
 回复
=啊=,lonaerd (redhat10) 大大的分数还是没到啊.......
笨笨兔兔兔兔兔 2005-04-06
  • 打赏
  • 举报
 回复
clonenode可是好东西
lonaerd 2005-04-06
  • 打赏
  • 举报
 回复
感谢各位支持！可惜我已经自己写出来了，不过楼上的都有分，再次感谢！
梅雪香 2005-04-04
  • 打赏
  • 举报
 回复
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>made by meixx</title>
<style type="css/text">
body{font-size:10pt}
</style>
<script language="javascript">
<!--
var curRowSource=null;
var curRowTarget=null;
function selectRow(obj){
if(curRowSource){
curRowSource.style.backgroundColor="#FFFFFF";
curRowSource.style.color="#000000";
}
obj.style.backgroundColor="#3366FF";
obj.style.color="#FFFFFF";
curRowSource=obj;
var btns=document.getElementsByName("btn");
btns[0].disabled=false;
}
function selectRow1(obj){
if(curRowTarget){
curRowTarget.style.backgroundColor="#FFFFFF";
curRowTarget.style.color="#000000";
}
obj.style.backgroundColor="#3366FF";
obj.style.color="#FFFFFF";
curRowTarget=obj;
var btns=document.getElementsByName("btn");
btns[2].disabled=false;
}
function Add(tbSou,tbTar){
var rowSou=null;
var newRow=tbTar.insertRow();
if(tbSou.id=="tbSource"){
rowSou=curRowSource;
newRow.attachEvent("onclick",function(){selectRow1(newRow);});
}
else{
rowSou=curRowTarget;
newRow.attachEvent("onclick",function(){selectRow(newRow);});
}
for(var i=0;i<rowSou.cells.length;i++){
var newCell=newRow.insertCell();
newCell.innerHTML=rowSou.cells[i].innerHTML;
}
tbSou.deleteRow(rowSou.rowIndex);
var btns=document.getElementsByName("btn");
btns[0].disabled=true;
btns[2].disabled=true;
}

function AddAll(tbSource,tbTarget){
for(var i=1;;i++){
if(tbSource.rows.length==1) return;
tbSource.rows[1].click();
Add(tbSource,tbTarget);
}

}
function doSubmit(){
SelectAll(frmDisplay.dltTarget);
//frmDisplay.action="";//设置form 提交的action
alert(frmDisplay.action);
//frmDisplay.submit();//取消注释即可,提交上去的options
}
//->
</script>
</head>

<body>
<table width="550" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="250" valign="top">
<table id="tbSource" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;cursor:default" bordercolor="#CCFFFF" width="100%">
<tr>
<td align="center" width="25%">姓名</td><td align="center" width="25%">性别</td><td align="center" width="25%">年龄</td><td align="center" width="25%">身高</td>
</tr>
<tr onclick="selectRow(this)">
<td>冯程程</td><td>女</td><td>22</td><td>167</td>
</tr>
<tr onclick="selectRow(this)">
<td>任盈盈</td><td>女</td><td>19</td><td>168</td>
</tr>
<tr onclick="selectRow(this)">
<td>杨玉环</td><td>女</td><td>18</td><td>162</td>
</tr>
<tr onclick="selectRow(this)">
<td>赢政</td><td>男</td><td>45</td><td>182</td>
</tr>
<tr onclick="selectRow(this)">
<td>项少龙</td><td>男</td><td>28</td><td>176</td>
</tr>
</table>
</td>
<td width="50" valign="middle">
<br>
<p style="width:100%" align="center"><input name="btn" type="button" value="->" onClick="Add(document.all.tbSource,tbTarget)" title="添加" disabled></p>
<p style="width:100%" align="center"><input name="btn" type="button" value="=>" onClick="AddAll(document.all.tbSource,tbTarget)" title="添加全部"></p>
<p style="width:100%" align="center"><input name="btn" type="button" value="<-" onClick="Add(tbTarget,document.all.tbSource)" title="删除" disabled></p>
<p style="width:100%" align="center"><input name="btn" type="button" value="<=" onClick="AddAll(tbTarget,document.all.tbSource)" title="删除全部"></p>
<br>
</td>
<td width="250" valign="top">
<form id="frmDisplay" action="xxx.jsp" method="post" style="margin:0 ">
<table id="tbTarget" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse" bordercolor="#CCFFFF" width="100%">
<tr>
<td align="center" width="25%">姓名</td><td align="center" width="25%">性别</td><td align="center" width="25%">年龄</td><td align="center" width="25%">身高</td>
</tr>
</table>
</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>
fason 2005-04-04
  • 打赏
  • 举报
 回复
用cloneNode
boneeater 2005-04-04
  • 打赏
  • 举报
 回复
to micker(希望下一代别再贫穷)
tr的innerHTML是只读的,你可以试试...
zhiin1 2005-04-03
  • 打赏
  • 举报
 回复
仅供参考:


<SCRIPT LANGUAGE=javascript>
function delCol() {
try {
var Elm = event.srcElement;
while(Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
}
if(Elm.parentElement.rows.length <= 1) {
alert("无法删除！");
return;
}
Elm.parentElement.deleteRow(Elm.rowIndex);
} catch(e) {
alert("Err 5001:\r\n" + e);
}
}
function addCol(id) {
try {
var oTable = document.getElementById(id);
if(oTable.tagName != "TABLE")
alert("Err 5002");
var oList = oTable.children;
var oTBODY;
for(var i=0;i<oList.length;i++) {
if(oList[i].tagName == "TBODY") {
oTBODY = oList[i];
break;
}
}
var oTR = oTBODY.lastChild;
var newTR = oTR.cloneNode(true);
addId(newTR);
oTBODY.insertAdjacentElement("beforeEnd",newTR);
} catch(e) {
alert("Err 5002:\r\n" + e);
}
}
function addId(node) {
try {
if(!node.hasChildNodes()) {
var prefix = node.getAttribute("id").split("_")[0];
var postfix = node.getAttribute("id").split("_")[1];
postfix = parseInt(postfix) + 1;
node.setAttribute("id",prefix + "_" + postfix);
node.setAttribute("value","");
return;
}
} catch(e) {}
try {
var oList = node.childNodes;
for(var i=0;i<oList.length;i++) {
addId(oList[i]);
}
} catch(e) {
alert("Err 5003:\r\n" + e);
}
}
</SCRIPT>
<table width="100%" border="1" align="center" cellpadding="3" cellspacing="1" bordercolor="#000000" class="tableprintable" id="t1">
<tr align="center" class="tdbg0">
<td class="tdbg0">稚鹰网际开发室(zhiin.net)</td><td><button class="button" onClick="delCol()">
删除</button></td>
</tr>
</table>
<button class="button" onClick="addCol('t1')">添加一行</button>
</td>
</tr>
</table>
micker 2005-04-03
  • 打赏
  • 举报
 回复
用innerHTML来搞定不久行了？？
adventure007 2005-04-03
  • 打赏
  • 举报
 回复
楼上的正确
还可以用cells[].rows[].innerHTML来返回这一行的html值在另一行中加入即可
boneeater 2005-04-03
  • 打赏
  • 举报
 回复
好多分啊*_*,看在这么多分的份上,我就专门写一段代码吧~~~~~
<html>
<head>
</head>
<body>
<script language="javascript">
function chkMe(){
var currObj = event.srcElement;
var tabB = document.getElementById("table_b");
var currCell = currObj.parentNode;
var currRow = currCell.parentNode;
if(currObj.checked)
{
var newRow = tabB.insertRow();
newRow.bgColor="gray";
var newCell = newRow.insertCell();
newCell.innerHTML = currRow.cells[1].innerText;
newCell.id = currObj.value;
}else{
var theRows = tabB.rows;
for(var i=0;i<theRows.length;i++)
{
if(theRows[i].cells[0].id==currObj.value)
tabB.deleteRow(i);
}
}
}
</script>
       表格a:
<table width="80%" border="1" align="center" bordercolor="#000000" id="table_a">
<tr>
<td width="30%">选择</td>
<td width="70%">姓名</td>
</tr>
<tr>
<td><input type="checkbox" onclick="chkMe()" value="stuId1"></td>
<td>学生1</td>
</tr>
<tr>
<td><input type="checkbox" onclick="chkMe()" value="stuId2"></td>
<td>学生2</td>
</tr>
<tr>
<td><input type="checkbox" onclick="chkMe()" value="stuId13></td>
<td>学生3</td>
</tr>
<tr>
<td><input type="checkbox" onclick="chkMe()" value="stuId4"></td>
<td>学生4</td>
</tr>
<tr>
<td><input type="checkbox" onclick="chkMe()" value="stuId5"></td>
<td>学生5</td>
</tr>
<tr>
<td><input type="checkbox" onclick="chkMe()" value="stuId6"></td>
<td>学生6</td>
</tr>
</table>
       表格b:
<table width="80%" border="1" align="center" cellpadding="2" cellspacing="1" bordercolor="#000000" id="table_b">
<tr>
<td>已经选中的学生</td>
</tr>
</table>
</body>
</html>
iview table高度动态设置方法
这篇文章将为大家分享一个 iview Table 高度动态设置方法，以解决这个问题。 一、问题描述 在使用 iView Table 组件时，设置固定高度可能会导致在不同分辨率的屏幕上显示不完全。例如，在高分辨率的屏幕上，表格...
antd table出现空白列的问题
table中需要有个固定列，所以用了scroll属性，但是发现表格出现了一个空白列。原因：列都设置了固定宽度，导致所有的宽度加起来没有表格宽度长，会出现空白列。解决:建议至少留一个列不设宽度，以自适应宽度。
Vue table不分页 动态加载数据（类似手机端滑动到底端后再去获取数据）
最近接到一个需求，pc端中的table 数据不做分页，而是做成滚动条形式，但是table中的数据还是一次显示50条，等这50条滑动到底部后，再去加载50条（有加载效果），以此类推，直到数据全部展示。 值得注意的是： 我的...
Element UI的表格table列的宽度自适应设置
不要设置 width="110px" ...el-table-column prop="login_id" align="center" label="工号"> </el-table-column> <el-table-column prop="login_id" width="110px" align="center" label="工号...
解决el-table中表格对不齐的问题
问题如图： 解决办法：.el-table th.gutter{ display: table-cell!important; } 可以在全局样式中添加，这样可以解决所有的页面中表格对不齐的问题
JavaScript

87,994

社区成员

224,697

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章