`
oywl2008
  • 浏览: 1003685 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

javascript create html 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'> &nbsp;&nbsp;<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);  
   }


  function  deleteAllRow(){
 
	var table = document.getElementById("tblGrid");
 
	var len = table.rows.length; 
  
 	for(var i = len-1;i >0;i--){
 
 		table.deleteRow(i);
 
   	} 
 
 }

  
  </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>
  <!-- sample table grid with 3 columns and 4 rows that are presented by default -->
  <table id="tblGrid" style="table-layout:fixed;" border="1" width="200" cellspacing="0" cellpadding="0" style= "border:1px solid #000000;">
   <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" /> &nbsp;&nbsp;<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" /> &nbsp;&nbsp;<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" /> &nbsp;&nbsp;<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" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
  </table>
  <hr>
  <input type="button" value="Add Row" onclick="addRow();" />
<br/>
   <input type="button" value="remove All Row" onclick="deleteAllRow();" />

  <hr>
  <a href='http://www.interviewboard.com'>Interviewboard - Interview Questions and Answers on ASP.NET, C#, SQL, Oracle and more....</a>
 </body>
</html>


<table border="0" width="200" cellspacing="1" cellpadding="0" style= "border:1px solid #000000;"
> 
<tr align="center">   <td >细</td> <td >表</td> </tr>
<tr align="center" >   <td >线</td> <td >格</td> </tr> 
</table>

 

分享到：
| 怎样吃西餐
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics