zoukankan      html  css  js  c++  java
  • table的创建方法

    <script type="text/javascript">
    function tableDom(){
    	var table = document.createElement("table");
    	table.border = "1"
    	document.body.appendChild(table);
    	var tbody = document.createElement('tbody');
    	table.appendChild(tbody);
    	
    	var tr = document.createElement('tr');
    	tbody.appendChild(tr)
    	var td = document.createElement('td');
    	td.appendChild(document.createTextNode("td1"));
    	tr.appendChild(td);
    	var td = document.createElement('td');
    	td.appendChild(document.createTextNode("td2"));
    	tr.appendChild(td);
    	var td = document.createElement('td');
    	td.appendChild(document.createTextNode("td3"));
    	tr.appendChild(td);
    	var td = document.createElement('td');
    	td.appendChild(document.createTextNode("td4"));
    	tr.appendChild(td);
    	
    }
    tableDom();
    </script>
    <script type="text/javascript">
    function tableHtml(){
    	var table = document.createElement("table");
    	table.border = "1"
    	document.body.appendChild(table);
    	var tbody = document.createElement('tbody');
    	table.appendChild(tbody);
    	
    	//创建第一行
    	tbody.insertRow(0);
    	tbody.rows[0].insertCell(0);
    	tbody.rows[0].cells[0].appendChild(document.createTextNode("td1"));
    	tbody.rows[0].insertCell(1);
    	tbody.rows[0].cells[1].appendChild(document.createTextNode("td2"));
    	tbody.rows[0].insertCell(2);
    	tbody.rows[0].cells[2].appendChild(document.createTextNode("td3"));
    	tbody.rows[0].insertCell(3);
    	tbody.rows[0].cells[3].appendChild(document.createTextNode("td4"));
    }
    tableHtml();
    </script>
    <div id="div1"></div>
    <script type="text/javascript">
    function tableinnerHTML(){
    	var table =[];
    	table.push("<table border='1'><tbody><tr>");
    	for(var i = 1; i<=4;i++){
    	table.push("<td>");
    	table.push("td"+i)
    	table.push("<\/td>");
    	}
    	table.push("<\/tr><\/tbody><\/table>");
    	document.getElementById("div1").innerHTML = table.join("");
    }
    tableinnerHTML();
    </script>
    <script type="text/javascript">
    function tableCloneDom(){
    	var table,tbody,tr,td;
    	otr = document.createElement("tr");
    	otd = document.createElement("td");
    	tbody = document.createElement("tbody");
    	table = document.createElement("table");
    	table.border = "1";
    	tr=otr.cloneNode(false);
    	for(var i=1;i<=4;i++){
    		td=otd.cloneNode(false);
    		td.appendChild(document.createTextNode('td'+i));
    		tr.appendChild(td);
    		tbody.appendChild(tr);
    	}
    	
    	table.appendChild(tbody);
    	document.body.appendChild(table);
    	
    }
    tableCloneDom();
    </script>
    

  • 相关阅读:
    IE6浏览器无法打开QQ邮箱
    vue 项目中 点击回车键 自动登录
    从后台拿数据来排序
    webpack 学习文档 自己留着用
    vue父子之间的传参问题
    vue中引入mint-ui的步骤 + mintui快速上手
    vue页面刷新
    调试兼容性该注意的的点
    垂直居中的几种方式 + css文本框文字溢出显示省略号
    elementui 鼠标悬停出现下拉列表
  • 原文地址:https://www.cnblogs.com/jsoo/p/2126521.html
Copyright © 2011-2022 走看看