javascript创建表格

表格是HTML中相对复杂的元素，需要合理搭配<tr>元素和<td>元素来使用，以下是使用JavaScript生成表格的两种方式。

方法一

自行创建<tr>元素和<td>元素，并使用DOM的appendChild方法将<td>元素添加进<tr>元素，将<tr>元素添加<table>元素。示例如下：

<html>
<head><meta charset="utf-8"><title>table</title><style>table{border:1px solid black;}td{border:1px solid black;}</style>
</head>
<body></body>
<script>table = document.createElement("table");tBody = document.createElement("tBody");for(var i=0;i<5;i++){tr = document.createElement("tr");tBody.appendChild(tr);for(var j=0;j<4;j++){td = document.createElement("td");tr.appendChild(td);td.innerHTML="列："+j+" 行："+i;}}table.appendChild(tBody);document.body.appendChild(table);
</script>
<html>

方法二

使用<tBody>元素的insertRow方法和<tr>元素的insertCell方法。示例如下：

<html>
<head><meta charset="utf-8"><title>table</title><style>table{border:1px solid black;}td{border:1px solid black;}</style>
</head>
<body></body>
<script>table = document.createElement("table");tBody = document.createElement("tBody");for(var i=0;i<5;i++){tr = tBody.insertRow(i);//完全的等于下两行注释里的代码//tr=document.createElement("tr");//tBody.appendChild(tr);for(var j=0;j<4;j++){td = tr.insertCell(j);//完全的等于下两行注释里的代码//td = document.createElement("td");//tr.appendChild(td);td.innerHTML="列："+j+" 行："+i;}}table.appendChild(tBody);document.body.appendChild(table);
</script>
<html>

javascript创建表格相关推荐

javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
javascript 动态创建表格：新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...
JavaScript学习（二十二）—动态创建表格
JavaScript学习(二十二)-动态创建表格效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
动态创建表格给同一个标签创建点击事件,每个点击事件操作的元素不一样. 现在有这样的需求,点击"查看详细"显示或隐藏标签.要实现这样的效果就要给点击标签添加两个属性,一个属性是nam ...
JavaScript 动态表格操作
阅读目录 JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法 1.1 Table 对象集合 1.2 Table 对象方法 1.3 Table 对象常用属性 1. ...
如何使用jQuery创建表格Zebra Stripes效果
这是一个简单的示例,展示了如何使用jQuery创建表格Zebra Stripes效果. <html> <head> <title>jQuery Zebra Stri ...
JavaScript在表格指定的位置插入和删除（传参）
开发工具与关键技术:DW和JavaScript 撰写时间:2019年1月17日 JavaScript在表格指定的位置插入和删除(传参) 1.先为页面设计Html 网页上出现的效果: 2.要实现插入行, ...
column属性 extjs_ExtJS使用ColumnModel创建表格和使用ArrayReader解析数组
在ExtJS创建表格可以按照以下几个基本步骤完成: 创建一个ColumnModel对象 Ext.grid.ColumnModel类描述了列的属性,具体列属性由列名和列索引组件组成,以下创建一个Colu ...
怎么用javascript做表格
第一种方法:只显示怎么创建表格 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...

javascript创建表格

javascript创建表格

方法一

方法二

javascript创建表格相关推荐

最新文章

热门文章