七郎's JavaBlog

草木竹石皆可為劒。至人之用人若鏡，不將不迎，應而不藏，故能勝物而不傷。
posts - 60, comments - 14, trackbacks - 0, articles - 0

JS 动态增加删除表格

Posted on 2008-07-17 15:15 七郎归来 阅读(1759) 评论(0)  编辑  收藏
 <HTML>   
  <HEAD>   
  <script   language="javascript">   
    
    
  //--------------------------删除行开始--------------------------------------   
  function   DeleteRow(obj){   
  //删除行   
  //index插入的位置   
  alert("Table1的行数:"+obj.rows.length+"\n"+"Table1的列数:"+obj.rows(0).cells.length);   
  if(obj.rows.length>1)   
  {   
  obj.deleteRow(obj.rows.length-1);   
  }   
    
  }   
  //--------------------------删除行结束--------------------------------------   
    
  //--------------------------插入行开始--------------------------------------   
  function   InsertRow(obj){   
  //插入行   
  //index插入的位置   
  alert("Table1的行数:"+obj.rows.length+"\n"+"Table1的列数:"+obj.rows(0).cells.length);   
  var   oTr=obj.insertRow(obj.rows.length);   
  oTr.style.height=21   
  var   oTd   
  for   (j=0;j<obj.rows(0).cells.length;j++)   
  {   
  oTd=oTr.insertCell(j)   
  oTd.innerText="   "       //"   "   
  }   
    
  }   
  //--------------------------插入行结束--------------------------------------   
    
    
  //--------------------------插入列开始--------------------------------------   
  function   InsertCol(obj){   
  var   oTd   
  for(j=0;j<obj.rows.length;j++){   
    
  oTd=obj.rows(j).insertCell(obj.rows(j).cells.length);   
  oTd.innerText="   "       //"   "   
  }   
  }   
  //--------------------------插入列结束--------------------------------------   
    
  //--------------------------删除列开始--------------------------------------   
  function   DeleteCol(obj){   
  alert(Table1.rows(0).cells.length);   
  for(j=0;j<Table1.rows.length;j++)   
  {   
  if(Table1.rows(j).cells.length>1)   
  {   
  Table1.rows(j).deleteCell(Table1.rows(j).cells.length-1);   
  }   
  }   
  }   
  //--------------------------删除列结束--------------------------------------   
    
  //--------------------------更改表格文字开始--------------------------------------   
  function   showinput()   
  {   
  elm   =   event.srcElement;   
  if   (elm.tagName   !=   "TD")   return;   
  elm.innerHTML   =   "<input   onblur='hide()'     value='"+elm.innerText+"'   style='text-align:center;width:100%;border-width:   0px;'   name='input1'   id='input1'></input>";   
  document.all.item("input1").focus();   
  document.all.item("input1").select();   
  }   
  function   hide()   
  {   
  elm   =   event.srcElement;   
  elm.parentNode.innerHTML   =   elm.value   
  }   
  //--------------------------更改表格文字结束--------------------------------------   
  //function   document.onmousedown(){   
  // alert(event.keyCode);   
  //}   
    
  </script>   
  <TITLE>Lion互动网络=》动态添加修改表格（行、列、内容）</TITLE>   
  </HEAD>   
  <BODY>   
  <INPUT   onclick="DeleteRow(Table1)"   type="button"   value="删除行"   ID="Button1"   NAME="Button1">&nbsp;<INPUT   onclick="InsertRow(Table1)"   type="button"   value="插入行"   ID="Button2"   NAME="Button2"><BR>   
  <INPUT   onclick="DeleteCol(Table1)"   type="button"   value="删除列"   ID="Button3"   NAME="Button3">&nbsp;<INPUT   onclick="InsertCol(Table1)"   type="button"   value="插入列"   ID="Button4"   NAME="Button4"></P>   
  <P><asp:datagrid   id="ID_Grid"   onclick="showinput()"   runat="server"   Width="100%"   AutoGenerateColumns="False"></asp:datagrid>Table1:   
  <TABLE   id="Table1"   onclick="showinput()"   cellSpacing="1"   cellPadding="1"   width="300"   border="1">   
  <TR>   
  <TD>d</TD>   
  <TD>c</TD>   
  <TD>a</TD>   
  </TR>   
  <TR>   
  <TD>a</TD>   
  <TD>b</TD>   
  <TD>c</TD>   
  </TR>   
  </TABLE>   
  </BODY>   
  </HTML> 

只有注册用户登录后才能发表评论。
网站导航: