js生成表格，可配合ajax传数据

最新推荐文章于 2021-08-05 14:07:19 发布

yuanblog

最新推荐文章于 2021-08-05 14:07:19 发布

阅读量480

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/yuanblog/article/details/81198560

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js动态生成表格</title>
    <script type="text/javascript">

    </script>
</head>
<body>
行:<input type="text" id="row"/>&nbsp;
列:<input type="text" id="col"/><br/>
<input type="button" value="生成" onclick="addTable();"/>
<div id="divtable">

</div>
<script type="text/javascript">
    function addTable() {
        var row1=document.getElementById("row).value;//获取属性值
        var col1=document.getElementById("col").value;//获取属性值
        var div1=document.getElementById("divtable");
        var tab="<table border='1' bordercolor='blue' width='200' height='10'><tr><td>1</td><td>2</td><td>3</td><tr/>";
        //循环行

        for(var i=1;i<=row1;i++)
        {
            tab+="<tr>";
            //循环列

                tab+="<td>单元格j</td><td>单元格2</td><td>单元格3</td>";

            tab+="</tr>";
        }
        tab+="</table>"
        div1.innerHTML=tab;
    }
</script>
</body>
</html>

$.ajax({
type: "POST",
url: "http://xxx.com/user/address_data",
dataType: "json",
data: {'city':city },
success: function (info) {
                   // vo=info[1];
console.log(info)
                   // console.log(vo.address8);
                   //alert(vo.address8);
                   // var row1=50;//获取属性值
                   var div1=document.getElementById("div1");
                   var tab="<table border='1' bordercolor='black' width='200' height='10'><tr><td>2018考研考点及地址</td><td>2017考研考点及地址</td><td>2016考研考点及地址</td><tr/>";
           //循环行
                       for(var i=0;i<info.length;i++){
                           //循环列
                           var vo=info[i];
                           tab+="<tr><td>"+vo.address8+"</td><td>"+vo.address7+"</td><td>"+vo.address6+"</td></tr>";
                       }
                       tab+="</table>"
                       div1.innerHTML=tab;
},
});