JavaScript函数创建表格

JavaScript使用函数创建表格

<button onclick="formStuden()">点我创建表格</button><script>function formStuden() {//创建表var atb = document.createElement('table');document.body.appendChild(atb);//创建表名字var os = document.createElement('caption');atb.appendChild(os);os.innerHTML = ('学生信息表');//创建表头var ot = document.createElement('thead');atb.appendChild(ot);//添加trvar or = document.createElement('tr');ot.appendChild(or);//添加tr内容th//内容th编号var th1 = document.createElement('th');th1.innerHTML = ('编号');or.appendChild(th1);//内容th姓名var th2 = document.createElement('th');th2.innerHTML = ('姓名');or.appendChild(th2);//内容th年龄var th3 = document.createElement('th');th3.innerHTML = ('年龄');or.appendChild(th3);//内容th操作var th4 = document.createElement('th');th4.innerHTML = ('操作');or.appendChild(th4);//创建主体var op = document.createElement('tbody');atb.appendChild(op);//输出行号//定义输出10行for (i = 0; i < 10; i++) {//添加trvar rr = document.createElement('tr');op.appendChild(rr);//添加th1var oth1 = document.createElement('th');rr.appendChild(oth1);oth1.innerHTML = ('1000');//添加th2var oth2 = document.createElement('th');rr.appendChild(oth2);oth2.innerHTML = ('张三');//添加th3var oth3 = document.createElement('th');rr.appendChild(oth3);oth3.innerHTML = ('20');//添加th4var oth4 = document.createElement('th');rr.appendChild(oth4);var och = document.createElement('a');och.innerHTML = ('删除');//删除创建的表格och.onclick = function () {var s = this.parentNode.parentNode;s.parentNode.removeChild(s);}oth4.appendChild(och);}}</script>

JavaScript函数创建表格相关推荐

javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
javascript 动态创建表格：新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...
利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
javascript 动态创建表格
<html><head><script>function createTable(rows,lines){this.rows=rows;this.lines=lin ...
JavaScript 函数创建思想
//定义一个函数的步骤//1.开辟一个新的空间地址//2.把函数体里面的代码当做字符串存储到空间里面(一个函数如果只定义了,没有执行的话,这个函数没有任何意义)//3.在把我们的地址给我们的函数名fu ...
javascript函数与事件
Javascript函数创建与使用什么是函数对于我们学过java的同学,我们可以将函数理解成就是我们在java中的方法. 创建函数在ECMAScript中函数有以下几种创建方式第一种 func ...
在 JavaScript 中动态创建表格、按钮和 DIV
使用 document.createElement() 方法,您可以在 JavaScript 中动态创建指定的 HTML 元素.创建后,您可以将元素插入(或添加)到您的网页,或将其添加到预定义元素或动 ...
JavaScript学习（二十二）—动态创建表格
JavaScript学习(二十二)-动态创建表格效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
JavaScript DOM操作表格及样式
一操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
javascript动态创建table
function createTable(parentNode,headres,datas){//创建表格var table = document.createElement("table& ...

JavaScript函数创建表格

JavaScript使用函数创建表格

JavaScript函数创建表格相关推荐

最新文章

热门文章