MUI 动态的加载表格数据

首先是我访问了后台获取到了json格式的数据集合lst

html代码如下：

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
        .table {
                border: 1px solid #cad9ea;
                color: #666;
            }

            .table th {
                background-repeat: repeat-x;
                height: 30px;
            }

            .table td,
            .table th {
                border: 1px solid #cad9ea;
                padding: 0 1em 0;
            }

            .table tr.alter {
                background-color: #f5fafe;
            }
    </style>
	</head>

	<body>
		<table class="table">
			<thead>
				<th>ID</th>
				<th>NAME</th>
				<th>AGE</th>
			</thead>
			<tbody>
				
				
			</tbody>
		</table>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
		var table = document.body.querySelector('tbody');
		mui.plusReady(function(){
			var jslst = plus.webview.currentWebview().jsdlst;
			for(var i=0;i<jslst.length;i++){
				var tr = document.createElement('tr');
				tr.innerHTML = "<td>"+jslst[i].id+"</td><td>"+jslst[i].name+"</td><td>"+jslst[i].age+"</td>";
				table.appendChild(tr);
			}
		});
		</script>
	</body>

</html>

虽然最后项目成功的运行起来，但是其中最让我感到不解的是

为什么添加tr元素会如此麻烦，必须使用“var table = document.body.querySelector('tbody');”来获取tbody元素，而不能使用document.getElementByTagId('tbody')，而且也不能直接的使用table.innerHtml = '<tr><td></td></tr>' 这种直接的HTML字符串格式，必须要先利用document来创建一个element（tr）然后给这个tr元素赋值，在使用appendchild（tr）来动态加载到tbody中。

感觉在使用mui的过程中发现，mui对表格的支持是相当的差，可以说基本上没有，如果大家的项目大量的用到了table，本人建议还是放弃MUI吧。

MUI 动态的加载表格数据

猜你喜欢