First, the following statements can be used to dynamically generate a Checkbox using JS:
Copy codeThe Code is as follows:
Var checkBox = document. createElement ("input ");
CheckBox. setAttribute ("type", "checkbox ");
CheckBox. setAttribute ("id", '20140901 ');
However, the generated checkbox does not contain text after the end. If you need to add it, you need to use
Document. createTextNode ('xxx ')
Method to generate a text node, which is placed behind the checkbox.
The following code generates a checkbox and a text node, puts them in a li object, and then adds the li object to the ul object:
Copy codeThe Code is as follows:
Var executerDiv = $ ("executerDiv ");
ExecuterDiv. innerHTML = "";
Var ul = document. createElement ("ul ");
For (var I = 0; I <tableDatas. length; I ++ ){
Var arr = tableDatas [I];
// Add the check box
Var checkBox = document. createElement ("input ");
CheckBox. setAttribute ("type", "checkbox ");
CheckBox. setAttribute ("id", arr [0]);
CheckBox. setAttribute ("name", arr [1]);
Var li = document. createElement ("li ");
Li. appendChild (checkBox );
Li. appendChild (document. createTextNode (arr [1]);
Ul. appendChild (li );
}
ExecuterDiv. appendChild (ul );
In the above Code, put the checkbox in li and ul, which can achieve a good arrangement. The CSS style set by UL and li is as follows:
Copy codeThe Code is as follows:
# ExecuterDiv {
}
# ExecuterDiv ul {
Margin: 0px;
Padding: 0px;
List-style-type: none;
Vertical-align: middle;
}
# ExecuterDiv li {
Float: left;
Display: block;
Width: 100px;
Height: 20px;
Line-height: 20px;
Font-size: 14px;
Font-weight: bold;
Color: #666666;
Text-decoration: none;
Text-align: left;
Background: # ffffff;
}