TableにTRを動的に追加するメモ
前回TableのcloneをjsとjQueryで速度調査メモ - tomoTakaの日記は、cloneを使って速度をはかってみたが、createElementしてもそんなに速度が変わらない？
DocumentFragmentを使った場合もそんなに変わらないのは、実装方法がいけてないのかな(^^;
- create by JavaScript
- create by JavaScript(DocumentFragmentを使った場合)
- sample.js(create by js ボタン処理)
...
document.getElementById('createJs').addEventListener('click', function(){
var startTime = Date.now();
var cloneCnt = document.getElementById('cloneCount').value;
var target = document.getElementById('clonebody');
for (var i = 0; i < cloneCnt; i++) {
var nextNo = noFunc.getNo();
var newTr = document.createElement('tr');
// No
var noTd = document.createElement('td');
noTd.appendChild(document.createTextNode(nextNo));
newTr.appendChild(noTd);
// Name
var nameTd = document.createElement('td');
var nameIn = document.createElement('input');
nameIn.type = 'text';
nameIn.name = 'name';
nameIn.maxlength = 10;
nameIn.value = "name" + nextNo;
nameTd.appendChild(nameIn);
newTr.appendChild(nameTd);
// age
var ageTd = document.createElement('td');
var ageIn = document.createElement('select');
for(var ix=1;ix<=6;ix++){
var opt = document.createElement('option');
opt.text = ix;
opt.value=ix;
ageIn.add(opt);
}
ageIn.value = 1;
ageTd.appendChild(ageIn);
newTr.appendChild(ageTd);
// gender
var genderTd = document.createElement('td');
var genderIn1 = document.createElement('input');
genderIn1.type = 'radio';
genderIn1.name = 'gender' + nextNo;
genderIn1.value = 'male';
genderIn1.text = 'male';
var genderIn2 = document.createElement('input');
genderIn2.type = 'radio';
genderIn2.name = 'gender' + nextNo;
genderIn2.value = 'female';
genderIn2.text = 'female';
genderTd.appendChild(genderIn1);
genderTd.appendChild(document.createTextNode('male'));
genderTd.appendChild(genderIn2);
genderTd.appendChild(document.createTextNode('female'));
newTr.appendChild(genderTd);
// lanuage
var langTd = document.createElement('td');
var langIn1 = document.createElement('input');
langIn1.type = 'checkbox';
langIn1.name = 'Java';
langIn1.value = 'Java';
var langIn2 = document.createElement('input');
langIn2.type = 'checkbox';
langIn2.name = 'JavaScrip';
langIn2.value = 'JavaScrip';
langTd.appendChild(langIn1);
langTd.appendChild(document.createTextNode('Java'));
langTd.appendChild(langIn2);
langTd.appendChild(document.createTextNode('JavaScript'));
newTr.appendChild(langTd);
// delete(js)
var delJsTd = document.createElement('td');
var delJs = document.createElement('input');
delJs.type = 'button';
delJs.name = 'delButtonJs';
delJs.value = "delete(js)";
delJs.setAttribute('data-Ix', nextNo - 1);
delJs.addEventListener('click', function(){
deleteTr(this);
});
delJsTd.appendChild(delJs);
newTr.appendChild(delJsTd);
// delete(jQuery)
var delJqTd = document.createElement('td');
var delJq = document.createElement('input');
delJq.type = 'button';
delJq.name = 'delButtonJq';
delJq.value = "delete(jQuery)";
delJqTd.appendChild(delJq);
newTr.appendChild(delJqTd);
// add tr to tbody
target.appendChild(newTr);
}
var endTime = Date.now();
calcTime(startTime, endTime);
- sample.js(create by js(DocumentFragment) ボタン処理)
...
document.getElementById('createJs2').addEventListener('click', function(){
var startTime = Date.now();
var cloneCnt = document.getElementById('cloneCount').value;
var target = document.getElementById('clonebody');
var frag1 = document.createDocumentFragment();
for (var i = 0; i < cloneCnt; i++) {
var nextNo = noFunc.getNo();
var newTr = document.createElement('tr');
// No
var noTd = document.createElement('td');
noTd.appendChild(document.createTextNode(nextNo));
newTr.appendChild(noTd);
// Name
var nameTd = document.createElement('td');
var nameIn = document.createElement('input');
nameIn.type = 'text';
nameIn.name = 'name';
nameIn.maxlength = 10;
nameIn.value = "name" + nextNo;
nameTd.appendChild(nameIn);
newTr.appendChild(nameTd);
// age
var ageTd = document.createElement('td');
var ageIn = document.createElement('select');
for(var ix=1;ix<=6;ix++){
var opt = document.createElement('option');
opt.text = ix;
opt.value=ix;
ageIn.add(opt);
}
ageIn.value = 1;
ageTd.appendChild(ageIn);
newTr.appendChild(ageTd);
// gender
var genderTd = document.createElement('td');
var genderIn1 = document.createElement('input');
genderIn1.type = 'radio';
genderIn1.name = 'gender' + nextNo;
genderIn1.value = 'male';
genderIn1.text = 'male';
var genderIn2 = document.createElement('input');
genderIn2.type = 'radio';
genderIn2.name = 'gender' + nextNo;
genderIn2.value = 'female';
genderIn2.text = 'female';
genderTd.appendChild(genderIn1);
genderTd.appendChild(document.createTextNode('male'));
genderTd.appendChild(genderIn2);
genderTd.appendChild(document.createTextNode('female'));
newTr.appendChild(genderTd);
// lanuage
var langTd = document.createElement('td');
var langIn1 = document.createElement('input');
langIn1.type = 'checkbox';
langIn1.name = 'Java';
langIn1.value = 'Java';
var langIn2 = document.createElement('input');
langIn2.type = 'checkbox';
langIn2.name = 'JavaScrip';
langIn2.value = 'JavaScrip';
langTd.appendChild(langIn1);
langTd.appendChild(document.createTextNode('Java'));
langTd.appendChild(langIn2);
langTd.appendChild(document.createTextNode('JavaScript'));
newTr.appendChild(langTd);
// delete(js)
var delJsTd = document.createElement('td');
var delJs = document.createElement('input');
delJs.type = 'button';
delJs.name = 'delButtonJs';
delJs.value = "delete(js)";
delJs.setAttribute('data-Ix', nextNo - 1);
delJs.addEventListener('click', function(){
deleteTr(this);
});
delJsTd.appendChild(delJs);
newTr.appendChild(delJsTd);
// delete(jQuery)
var delJqTd = document.createElement('td');
var delJq = document.createElement('input');
delJq.type = 'button';
delJq.name = 'delButtonJq';
delJq.value = "delete(jQuery)";
delJqTd.appendChild(delJq);
newTr.appendChild(delJqTd);
// add tr to tbody
frag1.appendChild(newTr);
}
target.appendChild(frag1);
var endTime = Date.now();
calcTime(startTime, endTime);
});
- sample.html
<!DOCTYPE html> <html> <head> <title>clone sample</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sample.css" /> <script src="js/libs/jquery/jquery.js"></script> <script src="sample.js"></script> </head> <body> <div><output id="clonetime"></output></div> <div> <label for="cloneCount">clone count:</label> <select id="cloneCount"> <option value="1" selected>1</option> <option value="100">100</option> <option value="500">500</option> <option value="1000">1000</option> </select> <input type="button" id="cloneJs" value="clone by js" /> <input type="button" id="cloneJq" value="clone by jQuery" /> <input type="button" id="createJs" value="create by js" /> <input type="button" id="createJs2" value="create by js(DocumentFragment)" /> </div> <table> <thead> <tr> <td>No</td> <td>Name</td> <td>age</td> <td>gender</td> <td>language</td> <td>delete(js)</td> <td>delete(jQuery)</td> </tr> </thead> <tbody id="clonebody"> <tr> <td>1</td> <td><input type="text" name="name" maxlength="10" value="name1"></td> <td> <select name="age"> <option value="1">1</option> <option value="2" selected>2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </td> <td> <input type="radio" name="gender0" value="male" />male <input type="radio" name="gender0" value="female" />female </td> <td> <input type="checkbox" name="Java" value="Java" />Java <input type="checkbox" name="JavaScript" value="JavaScript" />JavaScript </td> <td><input type="button" value="delete(js)" name="delButtonJs" onclick='deleteTr(this);' data-Ix="0"/> </td> <td><input type="button" value="delete(jQuery)" name="delButtonJq" /></td> </tr> </tbody> </table> </body> </html>
GitHub - tomoTaka01/HTML5CloneSample: clone simple sample by JavaScript and jQueryにもアップ
