社区
JavaScript
帖子详情
高分:一个老问题,如何从一个table复制到另外一个table
lonaerd
2005-04-03 11:02:46
我的要求是两个表格,其中Table_A里含有多选框的50个学生,现在要求选择多选框,则在Table_B中新插入一行,内容为Table_A选中的那一行,急需解决,谢谢!
...全文
191
10
打赏
收藏
高分:一个老问题,如何从一个table复制到另外一个table
我的要求是两个表格,其中Table_A里含有多选框的50个学生,现在要求选择多选框,则在Table_B中新插入一行,内容为Table_A选中的那一行,急需解决,谢谢!
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用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>
解决Layui 表格自适应高度的
问题
鄙人在写
一个
项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css <style> .layui-
table
-cell{ display:
table
-cell; vertical-align: middle; } </style> 成功解决
问题
,不要在field中添加高度,可以自行设置宽度,这样就可以让表格自适应高度了~! 以上这篇解决Layui 表格自适应高度的
问题
就是小编分享给大家的全部内容了,希望能给大家
一个
参考,也希望大家多多支持软件开发网。
iview
table
高度动态设置方法
下面小编就为大家分享一篇iview
table
高度动态设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
【亲测免费】 探索
Table
r Icons:一款高效且美观的SVG图标库
探索
Table
r Icons:一款高效且美观的SVG图标库 项目简介 是
一个
开源的SVG图标集合,由
Table
r团队精心设计并维护。这个项目提供了一套高质量、一致性和可自定义的图标,适用于各种Web和移动应用,帮助开发者快速构建视觉吸引人的界面。 技术分析
Table
r Icons 的核心是SVG(Scalable Vector Graphics)格式,这是一种基于XML的语言,用于描述二维矢量...
antd
table
出现空白列的
问题
table
中需要有个固定列,所以用了scroll属性,但是发现表格出现了
一个
空白列。原因:列都设置了固定宽度,导致所有的宽度加起来没有表格宽度长,会出现空白列。解决:建议至少留
一个
列不设宽度,以自适应宽度。
Vue
table
不分页 动态加载数据(类似手机端滑动到底端后再去获取数据)
最近接到
一个
需求,pc端中的
table
数据不做分页,而是做成滚动条形式,但是
table
中的数据还是一次显示50条,等这50条滑动到底部后,再去加载50条(有加载效果),以此类推,直到数据全部展示。 值得注意的是: 我的需求是 第一次请求数据就将全部数据都获取到,后期的数据加载实际上是不走后台接口的,是纯前端数据处理 1、首先要确定 加载数据的时机是:
table
中的滚动条滑动到底部的时候 scrollEvent(event) { /** * 需要判断滚动条是否到达
table
底部,到
JavaScript
87,997
社区成员
224,709
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章