用js输入行和列,点击按钮,动态创建表格。

用js输入行和列,点击按钮,动态创建表格。

话不多说,先上效果图:
效果图

html代码:

<input type="text" value="5" placeholder="请输入行数" id="rows">
<input type="text" value="5" placeholder="请输入列数" id="cols">
<input type="button" value="创建表格" onclick="creatTab()">
<div id="bigbox">
</div>

js代码:

<script>
var rows = document.getElementById("rows");
var cols = document.getElementById("cols");
var div = document.getElementById("bigbox");
var anniu = document.createElement("button")
function creatTab(){
    var tab = "<table border='1' width='500px' cellspacing='0'>"
    for(var i=0;i<rows.value;i++){
        tab=tab+"<tr>";
        for(var j=0;j<cols.value;j++){
            tab+="<td>"+i+j+"</td>";
        }
        tab+="<tr/>";
    }
    tab+='</table>';
    div.innerHTML=tab;
}
</script>

猜你喜欢

转载自blog.csdn.net/qq_43923146/article/details/107393052