利用JS动态生成隔行换色HTML表格的两种方法
更新时间：2018年10月09日 09:01:06 作者：Freeyn
这篇文章主要介绍了利用JS动态生成隔行换色HTML表格的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
用JS生成动态生成表格，行、列由用户输入，并使表格隔行换色
方法一.
代码:
<!DOCTYPE html>
<html>
<head>
<title>动态表格</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css" rel="external nofollow" rel="external nofollow" >-->
<script type="text/javascript">
function createTable(){
var table = document.createElement("table");
//添加边框
table.border = "1";
table.width = "100%";
//table API
//创建一行
//var tr = table.insertRow(table.rows.length);
//创建单元格
//var td = tr.insertCell(tr.cells.length);
//行，单元格
var tr,td;
//获得行列值
var tr_value = document.getElementById("tr_value").value;
var td_value = document.getElementById("td_value").value;
for(var i=0;i<tr_value;i++){
//循环插入元素
tr = table.insertRow(table.rows.length);
if(i%2 === 0){
tr.style.backgroundColor = "#D5E3D0";
}else{
tr.style.backgroundColor = "#909C97";
}
for(var j=0;j<td_value;j++){
td = tr.insertCell(tr.cells.length);
td.innerHTML = "_";
td.align = "center";
}
}
//td.innerHTML = "测试";
document.querySelector("#tb").appendChild(table);
}
</script>
</head>
<body>
<input type="text" id="tr_value">输入行数
<input type="text" id="td_value">输入列数
<input type="button" onclick="createTable()"； value="createTable">
<hr>
<div id="tb"></div>
</body>
</html>
运行结果:
输入行数、列数，create Table:
方法二.
代码:
<!DOCTYPE html>
<html>
<head>
<title>动态表格</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css" rel="external nofollow" rel="external nofollow" >-->
<script type="text/javascript">
var rows = prompt("输入行数:", "");
var cols = prompt("输入列数:", "");
document.write('<table width="100%" border="1px">');
document.write('<caption>成绩表</caption>');
for (var row = 1; row <= rows; row++) {
if (row % 2 == 0) {
document.write('<tr bgcolor=#CCCCCC>');
} else {
document.write('<tr>');
}
for (var col = 0; col < cols; col++) {
document.write('<td height="20px"></td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</head>
<body>
</body>
</html>
运行结果:
输入行数、列数:
总结
以上所述是小编给大家介绍的利用JS动态生成隔行换色HTML表格，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了js+canvas实现可自动吸附闭合的鼠标绘制多边形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
BootStrap 智能表单实战系列(五) 表单依赖插件处理
这篇文章主要介绍了BootStrap 智能表单实战系列(五) 表单依赖插件处理 的相关资料，比较简单，主要介绍生产表单元素后的一些后续处理操作，非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧2016-06-06
阿拉伯数字如何转为中文大写这个实现的方法有很多，在本文将为大家介绍下js中时如何实现的，感兴趣的朋友可以参考下2013-09-09
可拖动可改变大小div的实现代码，非常不错的应用，大家可以参考下。2009-08-08
bable是一个广泛使用的ES6转换器，可以将ES6代码转为ES5代码，本文给大家介绍VScode里面怎么使用bable，使用npm安装babel的方法，需要的朋友参考下吧2021-08-08
近期在练习或写项目时经常会遇到时间格式的转换问题,今天我就来总结一下,这篇文章主要给大家介绍了关于JavaScript中几种时间格式之间的简单转换,需要的朋友可以参考下2024-01-01
本文主要介绍防止重复发送 Ajax请求的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了微信小程序自定义tab实现多层tab嵌套，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
当我们需要判断用户输入的是否全是空格,或用户在不输入内容的情况下使用回车发送,此时我们如果需求内容不能为空,常规判断无法识别,空格本身也有length,这个时候就可使用到下列两种方式2023-10-10
这篇文章主要介绍了JS实现简单的右下角弹出提示窗口的方法,可实现点击连接右下角弹出提示框的功能,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
最新评论