1, a table form, the table divided into two parts, the top is thead header, header which only one row, there are three (TH), the following is the content table tbody, requires that each row in the tbody are dynamically created with js of
1 layout
Name Age Sex
2 style
*{
margin: 0;
padding: 0;
}
td{
border:1px solid;
}
th{
border:2px solid red;
}
3 js dynamically created table:
The first step: to prepare the data, a total of three personal information, as the three objects into an array
was arr = [{
name:'Jack',
age:18,
gendar: 'male'
},
{
name:'Rose',
age:19,
gendar: 'Women'
},
{
name:'Danny',
age:20,
gendar: 'male'
}
]
Step 2: Create line
// create a row
was str = ''
arr.forEach(function(){
str+=''
str+=''
})
Step 3: Create a cell, while filling content
for(var key in a){
str+=''+a[key]+''
}
Step four: js to set the table style (can also be set in css)
document.querySelector('table').width='300px'
document.querySelector('table').height='100px'
document.querySelector('table').style.borderCollapse='collapse'
document.querySelector('table').style.textAlign='center'
4 complete code
Name Age Sex
2, by clicking on the "Generate" button to generate a table from a number of defined rows and columns in a div tag
1 layout
Number of lines:
Number of columns:
2 js dynamically created table:
The first step: get the number of rows and columns
var h=document.getElementById('hang')-0
var l=document.getElementById('lie')-0
Step Two: Generate table
var taBle=""
taBle+=''
The third step: generating line
for(var i=1;i<=h;i++){
taBle+=''
taBle+=''
}
Fourth step: generating a cell
for(var j=1;j<=l;j++){
taBle+=''+'aaa'+''
}
Step 5: form into the div
divid.innerHTML=taBle
3 All codes
Number of lines:
Number of columns:
3. Click the button to add the table row
Zhengzhou crowd Hospital Which is better http://www.89906662.com/
1 layout
2 js dynamically created table:
Acquisition Table
var tAble=document.querySelector('input+table')
tAble.setAttribute('style','color:gold;border-collapse:collapse')
tAble.width='300px'
Generating header
var brr = [ 'Name', 'age', 'Sex']
was thead = ''
brr.forEach(function(a){
tHead+=''+a+''
})
tHead += ''
tAble.innerHTML=tHead
Click the button to add the table row
function fn2(){
var tR=document.createElement('tr')
var str = 'aaa'
tR.innerHTML=str
tAble.appendChild(tR)
}
3 All codes
4. Click the button to delete cells
1 layout
2 dynamically generated tables
The first step in generating header
tabLe=document.querySelector('#dele+table')
tabLe.width='300px'
tabLe.style.borderCollapse='collapse'
var crr = [ 'Name', 'age', 'Sex']
was thead = ''
crr.forEach(function(a){
tHEad+=''+a+''
})
tHEad+=''+' '+''
tHEad+=''
tabLe.innerHTML=tHEad
The second step add content
var tbOdy=document.createElement('tbody')
var Drs = [{
name:'Jack',
age:18,
gendar: 'male'
},
{
name:'Rose',
age:19,
gendar: 'Women'
},
{
name:'Danny',
age:20,
gendar: 'male'
}
]
was str2 = ''
for (var i = 0; in
str2+=''
for(var key in drr[i]){
str2+=''+drr[i][key]+''
}
str2+=''+''+''
str2+=''
}
tbOdy.innerHTML=str2
tabLe.appendChild(tbOdy)
Step Click the button to remove the table row
function del(){
var text=document.getElementsByName('checkRow')
console.log(text)
for (var i = 0; in
if(text[i].checked){
var TR=text[i].parentNode.parentNode
console.log(TR)
tbOdy.removeChild(TR)
i--
}
}
}
3 All codes
5, add or delete any table row
1 layout
Name Age Sex
2 js dynamically create form
Click the button to add the table
var tbodY=document.querySelector('#table5 tbody')
function add(){
var tatr=document.createElement('tr')
var tatd1=document.createElement('td')
var tatd2=document.createElement('td')
var tatd3=document.createElement('td')
tatr.appendChild(tatd1);
tatr.appendChild(tatd2);
tatr.appendChild(tatd3);
tbodY.appendChild(tatr);
}
Click the button to delete the last line
function dele(){
tbodY.removeChild(tbodY.lastChild)
}
3 All codes
5, add or delete any table row
Name Age Sex