zoukankan      html  css  js  c++  java
  • JS动态添加表格(一)

    利用document.createElement(),  appendChild()方法可以动态创建和添加表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <script type="text/javascript">
        var index = 3;    //行数
    	var number = 4;   //序号 
    	var oTR = new Array();  //创建一个TR数组
        function add(){
    	   index = index+1;
    	   oTR[index] = document.createElement("tr");   //TR
    	   var oTD = document.createElement("<td>");    //创建TD
    	   oTD.innerHTML = number++;
    	   oTR[index].appendChild(oTD);   //添加TR的子元素TD
    	   
    	   oTD = document.createElement("<td> </td>")
    	   oTR[index].appendChild(oTD);
    	   
    	   oTD = document.createElement("<td> </td>")
    	   oTR[index].appendChild(oTD);
    	   
    	   oTD = document.createElement("<td> </td>")
    	   oTR[index].appendChild(oTD);
    	   
    	   oTD = document.createElement("<td> </td>")
    	   oTR[index].appendChild(oTD);
    	   
    	   document.getElementById("mytbody").appendChild(oTR[index]);  //将TR添加到tbody中
    	}
    </script>
    <body>
    <table border="1" width="40%" align="center">
        <tr>
    	    <th>序号</th><th>询价内容</th><th>数量</th><th>单位</th><th>单价(元)</th>
    	</tr>
    	<tbody id="mytbody">
    	    <tr>
    		   <td>1</td><td> </td><td> </td><td> </td><td> </td>
    		</tr>
    		<tr>
    		  <td>2</td> <td> </td><td> </td><td> </td><td> </td>
    		</tr>
    		<tr>
    		  <td>3</td> <td> </td><td> </td><td> </td><td> </td>
    		</tr>
    	</tbody>
    	<tr>
    	     <td colspan="4"> </td><td align="right"><a href="javascript:add()">+增加</a></td>
    	</tr>
    </table>
    </body>
    </html>
    


  • 相关阅读:
    oracle去除字符串中间的空格
    java代理模式
    js方法中的this
    js中访问对象的方法
    Hadoop学习笔记
    查看电脑硬件常用命令
    Ubuntu18.0.4配置Hadoop1.2.1环境
    Entwurfsmuster
    WEB Front-end Development Technology
    Objekt Orientierte Programmierung C++
  • 原文地址:https://www.cnblogs.com/itmyhome/p/4131581.html
Copyright © 2011-2022 走看看