mqzheng/learning-table-element
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
janetX97 2018-08-02 18:07:18 +08:00
commit 261f87e889
3 changed files with 275 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
app.js Normal file
View File

@ -0,0 +1,127 @@
function allowDrop(ev) {
ev.preventDefault();
}
function dragcol(ev) {
var data = ev.dataTransfer.setData("Text", ev.target.className);
}
function dropcol(ev) {
var count = 0;
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var parentdiv = ev.target.parentNode;
var newnode = document.getElementsByClassName(data);
//locate which element to land output number
for (var each of parentdiv.children) {
if (each === ev.target) {
render(count);
} else {
count += 1;
}
}
function render() {
for (var each of newnode) {
each.parentNode.insertBefore(each, each.parentNode.children[count]);
}
}
}
var classes = [
"客户",
"番茄酱",
"海鲜粉",
"酱油",
"麻油",
"牛奶",
"苹果汁",
"盐",
"番茄酱a",
"海鲜粉a",
"酱油a",
"麻油a",
"牛奶a",
"苹果汁a",
"盐a"
];
var rows = document.getElementsByClassName("row");
//set all neccessary class for each table data
function setrowclass() {
for (var row of rows) {
var count = 0;
for (var td of row.children) {
td.setAttribute("class", classes[count]);
count += 1;
}
}
}
//set class and methods for ingrdient titles
var ingredient_title = document.getElementById("ingredient-title");
function setingtitleclass() {
var count = 0;
for (var th of ingredient_title.children) {
th.setAttribute("class", classes[count]);
th.setAttribute("draggable", "true");
th.setAttribute("ondragstart", "dragcol(event)");
count += 1;
}
}
function addrowandcol() {
var submitbtn = document.getElementById("submit");
submitbtn.addEventListener("click", function(e) {
var tr = document.createElement("tr");
tr.setAttribute("class", "row");
var rowvalue = document.getElementById("row").value;
var colvalue = document.getElementById("col").value;
var td = document.createElement("td");
e.preventDefault();
//document.getElementById("main_table").lastChild.appendChild(tr);
for (var i = 0; i < rowvalue; i++) {
document.getElementById("main_table").lastChild.appendChild(tr);
for (var x = 0; x < colvalue; x++) {
// document
// .getElementById("main_table")
// .lastChild.lastChild.appendChild(td);
}
}
console.log(document.getElementById("main_table").lastChild);
});
}
addrowandcol();
setrowclass();
setingtitleclass();
// function allowDrop(ev) {
// ev.preventDefault();
// }
// function dragcol(ev) {
// var data = ev.dataTransfer.setData("Text", ev.target.className);
// }
// function dropcol(ev) {
// var count = 0;
// ev.preventDefault();
// var data = ev.dataTransfer.getData("Text");
// var parentdiv = ev.target.parentNode;
// var newnode = document.getElementsByClassName(data);
// //locate which element to land output number
// for (var each of parentdiv.children) {
// if (each === ev.target) {
// console.log(count);
// render(count);
// } else {
// count += 1;
// }
// }
// function render() {
// for (var each of newnode) {
// each.parentNode.insertBefore(each, each.parentNode.children[count]);
// }
// }
// }

123
index.html Normal file
View File

@ -0,0 +1,123 @@
<!DOCTYPE html>
<html>
<head>
<title>tables</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<container>
<table class='table' id='main_table'>
<caption> 按客户与产品交叉分析报表</caption>
<tr id='main-title'>
<th></th>
<th colspan="7">数量</th>
<th colspan="7" class='highlight'>金额</th>
</tr>
<tr id='ingredient-title' ondragover="allowDrop(event)" ondrop="dropcol(event)">
<th>客户/产品</th>
<th>番茄酱</th>
<th>海鲜粉</th>
<th>酱油</th>
<th>麻油</th>
<th>牛奶</th>
<th>苹果汁</th>
<th>盐</th>
<th>番茄酱</th>
<th>海鲜粉</th>
<th>酱油</th>
<th>麻油</th>
<th>牛奶</th>
<th>苹果汁</th>
<th>盐</th>
</tr>
<tr class='row'>
<td>艾德高科技</td>
<td>20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>40</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>720.00</td>
<td></td>
</tr>
<tr class='row'>
<td>霸力建设</td>
<td>20</td>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>150.00</td>
<td></td>
<td></td>
<td></td>
<td>720.00</td>
<td></td>
</tr>
<tr class='row'>
<td>保信人寿</td>
<td>70</td>
<td></td>
<td></td>
<td></td>
<td>20</td>
<td>54</td>
<td></td>
<td>560.00</td>
<td></td>
<td></td>
<td></td>
<td>304.00</td>
<td>972.00</td>
<td></td>
</tr>
<tr class='row'>
<td>保信人寿abc</td>
<td>70</td>
<td></td>
<td></td>
<td></td>
<td>20</td>
<td>54</td>
<td></td>
<td>560.00</td>
<td></td>
<td></td>
<td></td>
<td>304.00</td>
<td>972.00</td>
<td></td>
</tr>
</table>
<sidebar>
<h1>tools box</h1>
<form>
<input type="number" placeholder="添加行" value='' id='row'>
<br>
<input type="number" placeholder="添加列" value='' id='col'>
<br>
<input type='button' id='submit' value='确定'>
</form>
</sidebar>
</container>
</body>
<script src='./app.js '></script>
</html>

25
style.css Normal file
View File

@ -0,0 +1,25 @@
container {
display: flex;
}
table {
width: 70%;
}
table,
th,
td {
border: solid black 1px;
border-collapse: collapse;
}
.highlight {
background-color: lightgoldenrodyellow;
}
/* from table element's table class on 8th child th element and add 1 each time */
table.table th:nth-child(1n + 9) {
background-color: lightgoldenrodyellow;
}
table.table td:nth-child(1n + 9) {
background-color: lightgoldenrodyellow;
}