動態(tài)創(chuàng)建表格

var json='[{"ename":"Tom", "salary":10000, "age":25},{"ename":"John", "salary":11000, "age":28},{"ename":"Mary", "salary":12000, "age":25}]';

? ? ? ? ? ? ? ? var emps=eval(json);

? ? ? ? ? ? ? ? var table=document.createElement('table');

? ? ? ? ? ? ? ? var thead=document.createElement('thead');

? ? ? ? ? ? ? ? var tr=document.createElement('tr');

? ? ? ? ? ? ? ? for(var key in emps[0]){

? ? ? ? ? ? ? ? var th=document.createElement('th');

? ? ? ? ? ? ? ? th.innerHTML=key;

? ? ? ? ? ? ? ? tr.appendChild(th);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? thead.appendChild(tr);

? ? ? ? ? ? ? ? table.appendChild(thead);

? ? ? ? ? ? ? ? //創(chuàng)建tbody

? ? ? ? ? ? ? ? var tbody=document.createElement('tbody');

? ? ? ? ? ? ? ? for(var i=0;i

? ? ? ? ? ? ? ? ? ? //創(chuàng)建行

? ? ? ? ? ? ? ? ? ? var tr=document.createElement('tr');

? ? ? ? ? ? ? ? ? ? tbody.appendChild(tr);

? ? ? ? ? ? ? ? ? ? //創(chuàng)建td

? ? ? ? ? ? ? ? ? ? for(var key in emps[i]){

? ? ? ? ? ? ? ? ? ? ? ? var td=document.createElement('td');

? ? ? ? ? ? ? ? ? ? ? ? td.innerHTML=emps[i][key];

? ? ? ? ? ? ? ? ? ? ? ? tr.appendChild(td);

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? table.appendChild(tbody);

? ? ? ? ? ? ? ? document.getElementById('data').appendChild(table);

仿微博

var inputVal=document.querySelector('.content>input');

? ? ? ? ? ? console.log(inputVal);

? ? ? ? ? ? var qwe=/^\s+$/;

? ? ? ? ? ? //獲取button

? ? ? ? ? ? var btn=document.querySelector('.content>button');

? ? ? ? ? ? btn.onclick=function(){

? ? ? ? ? ? ? ? if(inputVal.value==''||qwe.test(inputVal.value)){

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? //動態(tài)創(chuàng)建元素：

? ? ? ? ? ? ? ? var div=document.createElement('div');

? ? ? ? ? ? ? ? div.className='main';

? ? ? ? ? ? ? ? var img=document.createElement('img');

? ? ? ? ? ? ? ? img.src='img/1.jpg';

? ? ? ? ? ? ? ? div.appendChild(img);

? ? ? ? ? ? ? ? var p=document.createElement('p');

? ? ? ? ? ? ? ? p.innerHTML=inputVal.value;

? ? ? ? ? ? ? ? div.appendChild(p);

? ? ? ? ? ? ? ? var button=document.createElement('button');

? ? ? ? ? ? ? ? button.innerHTML='刪除';

? ? ? ? ? ? ? ? div.appendChild(button);

? ? ? ? ? ? ? ? document.querySelector('.container').appendChild(div);

? ? ? ? ? ? ? ? ? ? button.onclick=function(){

? ? ? ? ? ? ? ? ? ? this.parentElement.parentElement.removeChild(this.parentElement);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? }