DHTML技术综合演示---示例:表格创建2

最新推荐文章于 2023-04-24 11:59:24 发布

大z小z

最新推荐文章于 2023-04-24 11:59:24 发布

阅读量271

点赞数

分类专栏： dhtml 文章标签： dhtml 表格

本文链接：https://blog.csdn.net/qq_36171618/article/details/71933866

版权

dhtml 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DHTML技术综合演示---示例:表格创建2</title>

<style type="text/css">
table{
border:#00ffff solid 2px;
width:500px;
border-collapse:collapse;
}
table td{
border:#ff80ff solid 2px;
padding:5px;
margin:1px;
}
</style>
</head>
<body>
<script type="text/javascript">
//创建固定行数和列数的表格--创建5行6列的表格
function createTable2(){
var oTableNode = document.createElement("table");
for (var i = 1; i <=5; i++) {
var oTr = oTableNode.insertRow();
for (var j = 1; j <= 6; j++) {
var oTd = oTr.insertCell();
oTd.innerHTML="单元格"+i+"-"+j;
}
}
//添加到div中
document.getElementById("div1").appendChild(oTableNode);
}
</script>

<script type="text/javascript">
//根据输入的行号和列号来创建表格
function createTable3(){
var oTableNode = document.createElement("table");
//格式判断
try{
var rowNum = parseInt(document.getElementsByName("rowNum")[0].value);
var colNum = parseInt(document.getElementsByName("colNum")[0].value);
if(isNaN(rowNum)){
alert("行数格式错误!");
return;
}
if(isNaN(colNum)){
alert("列数格式错误!");
return;
}
}catch(e){
alert("不异常...");
return;
}
for(var i=1;i<=rowNum;i++){
var oTr = oTableNode.insertRow();
for(var j=1;j<=colNum;j++){
var oTd = oTr.insertCell();
oTd.innerHTML="单元格"+i+"-"+j;
}
}
document.getElementById("div2").appendChild(oTableNode);
}
</script>
<input type="button" value="创建表格2" οnclick="createTable2();"><br/><br/>

行数:<input type="text" name ="rowNum"/>    列数:<input type="text" name = "colNum"><br/>
<input type="button" value="创建表格3" οnclick="createTable3();">

</body>

</html>

当行数为空时（列数也是一样）

大z小z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DHTML技术综合演示---示例:表格创建2

DHTML技术综合演示---示例:表格创建2table{border:#00ffff solid 2px;width:500px;border-collapse:collapse;}table td{border:#ff80ff solid 2px;padding:5px;margin:1px;}//创建固定行数和列数的表格-
复制链接

扫一扫