js 中转换成list集合_js怎么将html表格数据转为集合

展开全部

html>

demo

table {

display: table;

border-collapse: collapse;

border: 1px solid #ccc;

}

tr, td, th {

border: 1px solid #ccc;

}

input {

min-width: 100px;

}

.operator {

margin: 20px 0;

}

button {

background: white;

font-size: 16px;

}

tr, td, th, input, button {

padding: 6px 12px;

}

名称年龄描述e68a84e8a2ad62616964757a686964616f31333365646330

设置

获取

var $ = function (selector, context) {

return (context || document).querySelector(selector);

};

var $$ = function (selector, context) {

return (context || document).querySelectorAll(selector);

};

function createTd(name) {

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

var input = document.createElement('input');

input.setAttribute('type', 'text');

input.setAttribute('name', name);

input.setAttribute('value', name + Math.floor(Math.random() * 100 + 1));

td.appendChild(input);

return td;

}

function addRows(len) {

var fg = document.createDocumentFragment();

while (len-- > 0) {

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

tr.appendChild(createTd('name'));

tr.appendChild(createTd('age'));

tr.appendChild(createTd('desc'));

fg.appendChild(tr);

}

$('tbody').appendChild(fg);

}

function getRows() {

var rows = [].slice.call($$('tbody>tr'));

return rows.map(function (tr) {

return {

name: $('[name=name]', tr).value,

age : $('[name=age]', tr).value,

desc: $('[name=desc]', tr).value,

};

});

}

$('[name=add]').addEventListener('click', function () {

[].slice.call($$('tbody>tr')).forEach(function (tr) {

$('tbody').removeChild(tr);

});

addRows(10);

$('[name=get]').removeAttribute('disabled');

}, false);

$('[name=get]').addEventListener('click', function () {

console.table(getRows());

}, false);