用JS动态创建表格

最新推荐文章于 2024-06-04 23:11:16 发布

hanxcloveyou

最新推荐文章于 2024-06-04 23:11:16 发布

阅读量272

点赞数

分类专栏： JS等效文章标签： javascript button input border function bt

JS等效专栏收录该内容

58 篇文章 0 订阅

订阅专栏

方案1、用.insertCell(); 和.insertRow();的方法
<html>
<head>
<title>Create Tables</title>
<script language="javascript">
function newTables(){
   var row = document.getElementById("rows");
   var col = document.getElementById("cols");
   var obj = document.getElementById("tbl");
   for(i=0;i<parseInt(row.value);i++)
   {
    R = obj.insertRow();
    for(j=0;j<parseInt(col.value);j++)
    {
     C = R.insertCell();
     C.innerHTML="第"+(i+1)+"行，第"+(j+1)+"个单元格";
    }
   }
}
</script>

</head>
<body>
<table id="tbl" align="center" bordercolor="#CCCCCC" border="1"></table>
<div align="center">请输入表格的行数：
<input type="text" name="rows">
列数：
<input type="text" name="cols">
<input name="bt" type="button" id="bt" value="GO" onClick="newTables()">
</div>
</body>
</html>

方案2、用span设置其innerHTML的方式，动态生成表格
<html >
<head><title>
无标题页
</title>
    <script language="javascript" type="text/javascript">
        function show(){
        if(document.getElementById("Text1").value==""){
            alert("行非空!");
            return false;
        }else if(isNaN(document.getElementById("Text1").value)){
            alert("行非字符!");
            return false;
        }else if(document.getElementById("Text2").value==""){
            alert("列非空!");
            return false;
        }else if(isNaN(document.getElementById("Text2").value)){
            alert("列非字符!");
            return false;
        }
        line=document.getElementById("Text1").value;
        row=document.getElementById("Text2").value;
            s="<table border='1' cellpadding='0' cellspacing='0' style='width:100%'>";
            for(var i=0;i<line;i++){
                s=s+"<tr>";
                for(var j=0;j<row;j++){
                    s=s+"<td>　</td>";
                }
                s=s+"</tr>";
            }
            s=s+"</table>";
            tables.innerHTML=s;
        }
    </script>
</head>
<body>

<form name="form1" method="post" action="Default.aspx" id="form1">

hanxcloveyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS动态创建表格

方案1、用.insertCell(); 和.insertRow();的方法 Create Tablesfunction newTables(){ var row = document.getElementById("rows"); var col = document.getElementById("cols"); var obj = document.getElementById("
复制链接

扫一扫