js for 循环数据到页面

最新推荐文章于 2025-06-18 16:14:06 发布

原创最新推荐文章于 2025-06-18 16:14:06 发布 · 9.4k 阅读

12 ·

CC 4.0 BY-SA版权

本文介绍了一种利用jQuery和HTML结合的方式动态生成表格的方法。通过一个JavaScript对象数组，该示例展示了如何将其内容填充到HTML表格中，并在网页加载完成后显示出来。此技术常用于展示动态获取的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html

<div style="width: 100%;height: 30px">
	<div style="margin-top: 0">
		<span style="float: left;width: 25%;text-align: center;">排序</span>
		<span  style="float: left;width: 25%;text-align: center;">昵称</span>
		<span  style="float: left;width: 25%;text-align: center;">年龄</span>
		<span  style="float: left;width: 25%;text-align: center;">风格</span>
	</div>
    </div>
	<div class="table">

	</div>

2.js

<script src='js/jquery-3.1.1.min.js'></script>
<script>
        window.onload = function () {
            var tab = [
                {name: '小仙女', age: 16, type: 'nice'},
                {name: '大長腿', age: 18, type: 'long'},
                {name: '小可爱', age: 20, type: 'cute'},
                {name: '小高冷', age: 22, type: 'cold'},
                {name: '她大叔', age: 38, type: 'smile'},
            ];
            var orderBody = '';
            $.each(tab, function (index, val) {
                orderBody += '<table style="width: 100%"><tbody>\
                        <tr class="ordertr">\
                            <td style="width: 25%;text-align: center;border: 1px solid #ccc">' + (index + 1) + '</td>\
                            <td style="width: 25%;text-align: center;border: 1px solid #ccc">' + val.name + '</th>\
                            <td style="width: 25%;text-align: center;border: 1px solid #ccc">' + val.age + '</td>\
                            <td style="width: 25%;text-align: center;border: 1px solid #ccc">' + val.type + '</td>\
                        </tr>\
                        </tbody></table>'
            })
            $('.table').append(orderBody);
        }
	</script>

3.效果如图