A. Table
Create a table of methods:
Create a table
var table = document.createElement("table");
Was then added in the table in thead
var thead = table.createTHead();
Add the line in thead tr in
var tr = thead.insertRow();
Add a column in the row tr
var td = tr.insertCell();
About dynamic feature additions and deletions to the form of
Table style
<style type="text/css">
table{
border-collapse:collapse;
width:400px;
height: 100px;
border: 1px black solid;
}
table>thead{
font-weight: bold;
}
table td{
border: 1px black solid;
text-align: center;
}
</style>
js code section:
<body>
<div id = "data"></div>
<script type="text/javascript">
, data = [
{"id":10,"name":"AD钙","price":2.0,"count":100},
{"id":20,"name":"农夫山泉","price":2.0,"count":200},
{"id":30,"name":"菠萝啤","price":3.0,"count":300},
{"id":40,"name":"柠檬柚子水","price":6.0,"count":50},
];
// Create table
var table = document.createElement("table");
// add thead in the table in
var thead = table.createTHead();
// add in thead tr in
var tr = thead.insertRow();
// loop through each item property of the first data array
for(var key in data[0]){
// add in the tr td, and set its contents to the current property name
tr.insertCell().innerHTML = key;
}
// add this column operation
. Tr.insertCell () innerHTML = "operation";
// add a tbody in the table in
var tbody = table.createTBody();
// traverse the array data for each item
for(var j=0;j<data.length;j++){
// add tbody tr in the
var tr = tbody.insertRow();
// traverse each attribute data in the current commodity
for(var key in data[j]){
// add in the tr td, td and set the contents of the current commodity current property values
tr.insertCell().innerHTML =data[j][key] ;
}
var delebut = document.createElement("button");
delebut.innerHTML = "Delete";
var amendbut = document.createElement("button");
amendbut.innerHTML = "modified";
var add = document.createElement("button");
add.innerHTML = "Add";
var td = tr.insertCell();
td.appendChild(delebut);//删除
td.appendChild (amendbut); // Modify
td.appendChild (add); // add
// delete click event
delebut.onclick = function(){
var tr = this.parentNode.parentNode;
//console.log(tr);
// humane prompt asking whether you want to delete certain data
if (confirm ( "Do you want to delete" + tr.cells [1] .innerHTML)) {
table.deleteRow(tr.rowIndex);
}
}
// click Modify event
amendbut.onclick = function(){
var tr = this.parentNode.parentNode;
var i = 0;
if (confirm ( "Do you want to edit" + tr.cells [1] .innerHTML)) {
var r = tr.rowIndex;
for(var key in data[r]){
data [r] [key] = prompt ( "edit" + key);
tr.cells[i].innerHTML = data[r][key];
i++;
}
}
}
// click Add Event
add.onclick = function(){
tbody.insertRow TR = var ();
IF (Confirm ( "Do you want to add new content")) {
for(var key in data[0]){
var td = tr.insertCell();
var content = prompt ( 'Enter' + key);
td.innerHTML = content;
}
var delebut = document.createElement("button");
delebut.innerHTML = "Delete";
var amendbut = document.createElement("button");
amendbut.innerHTML = "modified";
var add = document.createElement("button");
add.innerHTML = "Add";
var td = tr.insertCell();
td.appendChild(delebut);//删除
td.appendChild (amendbut); // Modify
td.appendChild (add); // add
}
}
}
// Add the table for the data element to the id
document.getElementById('data').appendChild(table);
</script>
</body>
Interface display:
Delete interface:
Modify the interface:
Add interface:
Lack of local interface: the added content is not added to the array inside, just add content to add to the interface,
After adding the content can not operate