代码拉取完成，页面将自动刷新
一个自定义js表格
软件架构说明
直接导入defineTable.js,index.css
</script>
<script type="text/javascript">
var table;
window.onload = function() {
var data = [
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];
table = defineTable(document.getElementById('box'), {
data: data,
columnHeaders: [1, 2, 3, 4, 5, 6],
rowHeaders: ['a', 'b', 'c', 'd'],
// colWidths: ['100px', '100px', '100px', '100px', '100px', '100px', '100px', '100px'],
defaultColWidth:'100px',
defaultRowHeight:'50px',
// onselecting: onselecting,
// onselected:onselected,
// onmouseup:onmouseup,
onmousedown:onmousedown
});
};
function onselecting(el, c1, r1, c2, r2) {
console.log(el, c1, r1, c2, r2)
};
function onselected(el, c1, r1, c2, r2) {
console.log(el, c1, r1, c2, r2)
// onSelect(c1, r1, c2, r2)
};
function onmousedown(el, c1, r1) {
console.log(el, c1, r1)
console.log(table)
// table.setStyle(c1,r1,{"backgroundColor":"red"})
console.log(
table.getCell(c1,r1))
};
function onmouseup(el, c1, r1) {
console.log(el, c1, r1)
console.log(table.getColumnHeader(c1), table.getRowHeader(r1))
};
function onSelect(c1, r1, c2, r2) {
for (let i = (c1 > c2 ? c2 : c1); i <= (c1 > c2 ? c1 : c2); i++) {
for (let j = (r1 > r2 ? r2 : r1); j <= (r1 > r2 ? r1 : r2); j++) {
let td = document.querySelector("[data-x=\"" + i + "\"][data-y=\"" + j + "\"]");
if (td.style.background == 'red') {
td.style.background = '';
} else {
td.style.background = 'red';
}
}
}
}
</script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="box">
</div>
</body>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。