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
おすすめ