HTML--通过JavaScript操作HTML的Table

Jack Wu

浏览: 887486 次
来自: ...

最近访客更多访客>>

chuandaojun

devcang

fordsupr

fanfree

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML JavaScript ASP.net Oracle ASP

样例1（JavaScript修改Table表的行背景颜色）：

首先使用CSS定义背景颜色:

<style> .odd{background-color: white;} .even{background-color: gray;} </style>

编写修改背景颜色函数:

function alternate(id){ if(document.getElementsByTagName){ var table = document.getElementById(id); var rows = table.getElementsByTagName("tr"); for(i = 0; i < rows.length; i++){ //manipulate rows if(i % 2 == 0){ rows[i].className = "even"; }else{ rows[i].className = "odd"; } } } }

在HTML中设置事件调用函数alternate：

<html> … <body onload="alternate('thetable')"> <table id="thetable"> <tr><td>…</td></tr> </table> …

样例2（JavaScript增加删除Table表的行）：

<html>
<head>
  <title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
  <script language="javascript">

   //add a new row to the table
   function addRow()
   {
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("tblGrid").insertRow();

    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'>   <input type='button' value='Delete' onclick='removeRow(this);'/>";
   }

   //deletes the specified row from the table
   function removeRow(src)
   {
    /* src refers to the input button that was clicked.
       to get a reference to the containing <tr> element,
       get the parent of the parent (in this case case <tr>)
    */
    var oRow = src.parentElement.parentElement;

    //once the row reference is obtained, delete it passing in its rowIndex
    document.all("tblGrid").deleteRow(oRow.rowIndex);
   }

  </script>
</head>
<body>
  Demo of a simple table grid that allows adding and deleting rows using DHTML
  and Javascript
  <p/>
  Try it out - Click on the Delete button to delete the corresponding row. Click Add Row button to insert a new row.
  <p/>
  <p/>Browser compatility - this sample has been tested to work with IE5.0 and above.
  <p/>
  <hr>
  
  <table id="tblGrid" style="table-layout:fixed">
   <tr>
    <td width="150px">Field1</td>
    <td width="150px">Field2</td>
    <td width="250px">Field3</td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" />   <input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" />   <input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" />   <input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" />   <input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
  </table>
  <hr>
  <input type="button" value="Add Row" onclick="addRow();" />
  <hr>
  <a href='http://www.interviewboard.com'>Interviewboard - Interview Questions and Answers on ASP.NET, C#, SQL, Oracle and more....</a>
</body>
</html>

分享到：

VC--操作HTML的TABLE的样例代码 | BW--SAP BI的一些常用TCODE列表

2007-10-22 10:16
浏览 1163
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论