js dom 创建table标签和子属性， 以及创建多选框
代码：
<div class="Category">
<span >Edit Categories</span>
<table>
<tbody></tbody>
</table>
</div>
<div>
<!--Add New Category-->
<span >Add New Category</span>
<hr/>
<h3>
Title
</h3>
<input type="text" size="40" style="height: 30px; font-size: 18px">
<h3>
Description(30 characters including HTML)
</h3>
<textarea rows="10" cols="54" style="display: block; margin-bottom: 20px;"></textarea>
<input type="button" value="ADD">
</div>
<script type="text/javascript" src="/static/admin/js/jquery-1.10.2.js"></script>
<script type="text/javascript">
// 1. 先获取浏览器的宽度
// 2. 获取左边的宽度
// 3. 相减
window.onload=function (){
<!--var total_length = window.innerWidth;-->
<!--console.log(total_length);-->
<!--var left_length = document.getElementsByClassName("nav")[0].offsetHeight;-->
<!--var right_length = total_length - left_length;-->
var form = {};
<!--document.getElementsByClassName("right_side")[0].style.width = right_length + 'px';-->
// 写ajax 获取 category ， 然后生成table
$.ajax({
url: "/showcategory",
type: 'post',
data: form,
success: function(arg){
var my_data = JSON.parse(arg);
if (my_data["statuscode"]==2000){
var category_info = my_data["value"];
// 1. 先生成表头
// 2. 在生成table body
<!--var title = [];-->
var title = ["ID", "Title", "TitleStatus", "CreateTime"];
var table = document.getElementsByTagName('table')[0];
if(category_info.length != 0){
<!--for (var i in category_info[0]){-->
<!--title.push(i);-->
<!--}-->
for (var c = 0; c < title.length; c++){
var th = document.createElement('th');
table.getElementsByTagName('tbody')[0].appendChild(th);
table.getElementsByTagName('tbody')[0].getElementsByTagName('th')[c].innerHTML = title[c];
}
for (var b = 0; b < category_info.length; b++){
var tr = document.createElement('tr');
for (var i in title){
var td = document.createElement("td");
if (title[i] == 'TitleStatus' && category_info[b][title[i]] == 1){
td.innerHTML = "True";
} else{
td.innerHTML = "" + category_info[b][title[i]];
}
tr.appendChild(td);
}
table.appendChild(tr);
}
}
}
}
})
}
// 1. 去model获取类型， 然后生成表格
</script>
代码：
<div class="category">
</div>
<script type="text/javascript" src="/static/admin/js/jquery-1.10.2.js"></script>
<script type="text/javascript">
window.onload = function(){
// 1. 生成Category 的多选框标签， 可多选
var form = {};
$.ajax({
url: "/showcategory",
type: 'post',
data: form,
success: function(arg){
var my_data = JSON.parse(arg);
if (my_data["statuscode"]==2000){
// 标签信息【{}， {}】
var category_info = my_data["value"];
outside_class = document.getElementsByClassName("category");
console.log(outside_class);
console.log(outside_class[0]);
// <p><input type="checkbox" name="vehicle" value="Bike" /> I have a bike</p>
for (var i=0; i < category_info.length; i++){
var p_label = document.createElement("p");
var multiple_input = document.createElement("input");
p_label.innerHTML = "" + category_info[i]["Title"];
p_label.appendChild(multiple_input);
outside_class[0].appendChild(p_label);
document.getElementsByClassName("category")[0].getElementsByTagName("input")[i].setAttribute("type","checkbox");
document.getElementsByClassName("category")[0].getElementsByTagName("input")[i].setAttribute("value",category_info[i]["ID"]);
}
}
}
})
}
</script>