2019.8.21页面功能的实现

利用数组的原型对数组进行去重
Array.prototype.fun = function(){
for(var i = 0,result= [];i < arr.length;i++){
for(var j = 0;j < result.length;j++){
if(result[j] == arr[i]){
break;
}
}
if(j == result.length){
result[result.length] = arr[i]
}
}
console.log(result);


}
var arr = [1,2,2,3,3,4,5,5];
arr.fun()

 

创建行分组 createXXX()
ex:
var head = table.createTHead() 创建一个行分组，同时添加到table中
可以利用head继续向行分组中添加tr
删除行分组
deleteXXX()
tabel.deleteTHead()
获得行分组
table.tHead
特殊：
tBody 一个table中可以包含多个tbody
获得： table.tBodies[i]
删除：table无法删除tbody
行分组：
创建： insertRow(i), insertRow()表示末尾追加一行
ex : var tr = thead.insertRow(); 可以继续往tr中添加td
删除：
每一行tr都有tr.rowIndex,记录了tr在整个表中的下标
ex: thead.deleteRow(i)
tbody.delelteRow(i)
table.deleteRow(i)
获取行：
.rows
单元格:
添加：无法添加th
.insertCell(i)
删除单元格：
.deleteCell(i)
获取格：
.cells

Form/Element
Form 对象代表网页删的一个form元素
获取：var form = document.forms[i/id/name];
属性：
.elements 获得form中所有表单元素的集合
获取表单单个元素：
var elem = form.elements[i/id/name] name并不是每个表单元素都会写的
简写： 如果表单元素有name属性，可以直接获得
var elem = form.name;
.length --> elements.length 获取表单元素个数
方法：
.submit() 手动提交 经常和普通的按钮一起搭配使用
事件：
.onsubmit() 当表单最终提交之前自动触发

要求页面能够显示以下面信息为数据的表格，并附加修改，删除，增加功能

var data = [
{'id':1,'name':'面包','price':1.0,'count':10000},
{'id':2,'name':'薯片','price':2.0,'count':5000},
{'id':3,'name':'饼干','price':2.5,'count':6000},
];

var table = document.createElement('table');
var thead = table.createTHead();
var tr = thead.insertRow();

for(var key in data[0]){
var td = tr.insertCell();
td.innerHTML = key;
}

tr.insertCell().innerHTML = '操作';
tr.insertCell().innerHTML = '操作';
var add = document.createElement('button');
add.onclick = onadd;
add.innerHTML = '增加';
tr.insertCell().appendChild(add);

var tbody = table.createTBody();
for(var i = 0; i < data.length;i++){
var tr = tbody.insertRow();
for(var key in data[0]){
var td = tr.insertCell();
td.innerHTML = data[i][key]
}

var change = document.createElement('button');
var delt = document.createElement('button');
change.innerHTML = '修改';
change.onclick = onchange;
delt.innerHTML = '删除';
delt.onclick = ondelt;
tr.insertCell().appendChild(change);
tr.insertCell().appendChild(delt);
}

function ondelt(){
var tr = this.parentNode.parentNode;
if(confirm('是否删除'+tr.cells[1].innerHTML))
tr.innerHTML = '';
}

function onchange(){
var tr = this.parentNode.parentNode;
var i = 0;
for(var key in data[0]){
var list = prompt('请输入修改的'+key);
if(list == ''){
break;
}else{
tr.cells[i].innerHTML = list;
i++;
}
}
}

function onadd(){
var tr = table.insertRow();
for(var key in data[0]){
var td = tr.insertCell()
td.innerHTML = prompt('请输入'+key)
}
var change = document.createElement('button');
var delt = document.createElement('button');
change.innerHTML = '修改';
change.onclick = onchange;
delt.innerHTML = '删除';
delt.onclick = ondelt;
tr.insertCell().appendChild(change);
tr.insertCell().appendChild(delt);
table.appendChild(tr);
}

document.body.appendChild(table);