From 261f87e8893c9d3309d3f92c4578a282d82d6e3b Mon Sep 17 00:00:00 2001 From: janetX97 Date: Thu, 2 Aug 2018 18:07:18 +0800 Subject: [PATCH] first commit --- app.js | 127 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 123 +++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 25 +++++++++++ 3 files changed, 275 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..2958211 --- /dev/null +++ b/app.js @@ -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]); +// } +// } +// } diff --git a/index.html b/index.html new file mode 100644 index 0000000..7765c47 --- /dev/null +++ b/index.html @@ -0,0 +1,123 @@ + + + + + tables + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
按客户与产品交叉分析报表
数量金额
客户/产品番茄酱海鲜粉酱油麻油牛奶苹果汁盐番茄酱海鲜粉酱油麻油牛奶苹果汁盐
艾德高科技2040720.00
霸力建设205150.00720.00
保信人寿702054560.00304.00972.00
保信人寿abc702054560.00304.00972.00
+ + +

tools box

+
+ +
+ +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e22aeca --- /dev/null +++ b/style.css @@ -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; +}