白天有雨

此处应该有掌声

导航

对表格进行动态操作例子

1.对表格进行动态移动删除操作例子:

<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="重置">&nbsp;&nbsp;
  <input type="button" value="提交" onClick="doSubmit()">2
 </td>
  </tr>
</table>

</body>
</html>

2.动态添加表格:

<table id="t" border="1">
<tr><td>test</td><td>test</td><td><input type="button" value="在上方插入新行" onclick="insertRow(this)"/></td></tr>
<tr><td>test</td><td>test</td><td><input type="button" value="在上方插入新行" onclick="insertRow(this)"/></td></tr>
<tr><td>test</td><td>test</td><td><input type="button" value="在上方插入新行" onclick="insertRow(this)"/></td></tr>
<tr><td>test</td><td>test</td><td><input type="button" value="在上方插入新行" onclick="insertRow(this)"/></td></tr>
<tr><td>test</td><td>test</td><td><input type="button" value="在上方插入新行" onclick="insertRow(this)"/></td></tr>
<tr><td>test</td><td>test</td><td><input type="button" value="在上方插入新行" onclick="insertRow(this)"/></td></tr>
</table>
<script language="javascript">
<!--
function insertRow(o){
tr = o.parentNode.parentNode;
n  = tr.cloneNode(true);
n.childNodes[0].innerText="插入值";
n.bgColor="red";
tr.parentNode.insertBefore(n,tr);
}
//-->
</script>

posted on 2006-07-12 16:24  卓如  阅读(1062)  评论(1编辑  收藏  举报