1,base.js中
var words = { 1: "a", 2: "b",3:"c",4:"d",5:"e",6:"f",7:"g"};
2、在页面上引用
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/Base.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
InitCheckBox($("#divList").get(0), words, "chk");
})
function InitCheckBox(parent, words, id) {
debugger;
var Chk, Label;
//判断生成多少行 Start
var vLenth = 0;
for (var i in words) {
vLenth++;
}
var v = vLenth / 3;
var row;
if (parseInt(v) == v) {
row = v;
}
else {
row = parseInt(v) + 1;
}
//判断生成多少行 End
//动态生成table Start
var data = new Array();
data.push('<table border=1><tbody>');
for (var i = 1; i < row + 1; i++) {//行
data.push('<tr>');
for (var j = 1; j < 4; j++) {//列 一行有三列
var id = i + "_" + j;
data.push('<td id="' + id + '"></td>');
}
data.push('</tr>');
}
data.push('</tbody></table>');
parent.innerHTML = data.join('');
//动态生成table End
//往表格生成数据
var row = 1;
var col = 1;
for (var i in words) {
var tdID = row + "_" + col;
td_id = document.getElementById(tdID);
Chk = document.createElement("input"); //动态创建checkbox
Chk.id = id + i;
Chk.name = id + i;
Chk.type = "checkbox";
Chk.value = i;
td_id.appendChild(Chk);
Label = document.createElement("label");//动态创建label
Label.id = i;
Label.setAttribute("for", id + i);
Label.innerHTML = words[i];
td_id.appendChild(Label);
col++;
if (col == 4) {
row++;
col = 1;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divList">
</div>
</form>
</body>
</html>