Ajax生成表格数据原生写法

最新推荐文章于 2024-08-14 19:24:14 发布

大白菜程序猿

最新推荐文章于 2024-08-14 19:24:14 发布

阅读量243

点赞数

分类专栏： html+css 文章标签： AJAX 原生JavaScript 动态表格用户信息服务器请求

本文链接：https://blog.csdn.net/m0_50641264/article/details/120198990

版权

html+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Ajax生成生成表格数据原生写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/datatables.css"/>
</head>
<body>
<div class="box">
    <table id="datatable">
        <caption>用户信息管理表</caption>
    </table>
</div>
<div class="demo">
	
</div>
<BUTTON type="button" id="btn"> 测试</BUTTON>
</body>
</html>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script src="../static/js/datatable.js" type="text/javascript"></script>

<script type="text/javascript">
    url = 'http://127.0.0.1:8000/'
    $('#btn').click(function () {

        html = ''
        //ajax请求
        $.get(url, function (res) {
            console.log(res.data);

            html += '<table border="1px">';
            html += '<thead><th>用户名</th>';
            html += '<th>用户密码</th>';
			html += '<th>操作</th>';
            html += '</thead><tbody>';
            var len = res.data.length;
            for (var i = 0; i < len; i++) 
			{
				html += '<tr><td>' + res.data[i][1] + '</td>';
				html+='<td>' + res.data[i][2]+ '</td>';
				html+='<td><button id="edit" οnclick="alert(2)">修改</button></td>';
				html+='</tr>';
            }
            html += '</table>';
            $('.demo').append(html);
        })

    })
</script>

大白菜程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax生成表格数据原生写法

Ajax生成生成表格数据原生写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="css/datatables.css"/></head><body><div
复制链接

扫一扫