2. 程式人生 > >百度前端技術學院：第三十一到第三十三天：我是精明的小賣家（一）

百度前端技術學院：第三十一到第三十三天：我是精明的小賣家（一）

阿新 • • 發佈：2018-12-12
var regionGroup = document.getElementById("region-radio-wrapper"); var productGroup = document.getElementById("product-radio-wrapper"); var tableDiv = document.getElementById("table-wrapper"); function checkBoxGroup(checkBoxName, data) { var allSelect = document.
createElement("input"); allSelect.setAttribute("type", "checkbox"); allSelect.setAttribute("checkbox-type", "all"); allSelect.setAttribute("value", "0"); var text = document.createTextNode("全選"); checkBoxName.appendChild(allSelect); checkBoxName.
appendChild(text); for (var i = 0; i < data.length; i++) { var select = document.createElement("input"); select.setAttribute("type", "checkbox"); select.setAttribute("value", i + 1); select.setAttribute("checkbox-type", "single"
) var text = document.createTextNode(data[i].text); checkBoxName.appendChild(select); checkBoxName.appendChild(text); } checkBoxName.onclick = function (event) { var event = event || window.event; var target = event.target || event.srcElement; if (target.getAttribute("type") == "checkbox") { var len = checkBoxName.childNodes.length; var count = 0; var checkBoxType = target.getAttribute("checkbox-type"); if (checkBoxType == "all") { if (target.checked == true) { for (var i = 2; i < len; i++) { //checkBoxName.childNodes[i].getchecked = true; if (checkBoxName.childNodes[i].tagName == "INPUT") { checkBoxName.childNodes[i].checked = true; console.log(checkBoxName.childNodes[i]); } } } else { target.checked = true; } } if (checkBoxType == "single") { for (var i = 2; i < len; i++) { if (checkBoxName.childNodes[i].checked == true) { count++; console.log(checkBoxName.childNodes[i]); } } console.log(count); if (count == len / 2 - 1 && allSelect.checked == false) { allSelect.checked = true; } else if (count < len / 2 - 1 && count > 0) { allSelect.checked = false; } else if (count == 0) { target.checked = true; } } } createTable(); } } function getData(checkBoxName) { var checkBoxNamelen = checkBoxName.childNodes.length; var checkBoxNameArr = new Array(); for (var i = 2; i < checkBoxNamelen; i++) { if (checkBoxName.childNodes[i].checked == true) { checkBoxNameArr.push(checkBoxName.childNodes[i + 1].textContent); } } return checkBoxNameArr; } function getTableData() { selectRegion = getData(regionGroup); selectProduct = getData(productGroup); var arr = new Array(); console.log(selectRegion); for (var z = 0; z < selectProduct.length; z++) { for (var i = 0; i < selectRegion.length; i++) { for (var j = 0; j < sourceData.length; j++) { if (sourceData[j].region == selectRegion[i] && sourceData[j].product == selectProduct[z]) { arr.push(sourceData[j]); } } } } console.log(arr); return arr; } function createTable() { if (tableDiv.childNodes[0]) { tableDiv.removeChild(tableDiv.childNodes[0]); } arr = getTableData(); table = document.createElement("table"); regionLen = selectRegion.length; productLen = selectProduct.length; if (productLen == 1 && regionLen >= 1) { diffTable1();//可以換成diffTable3()，該函式包含diffTable1()的情況。 } else if (regionLen == 1 && productLen > 1) { diffTable2(); } else if (regionLen > 1 && productLen > 1) { diffTable3(); } //把生成的HTML內容賦給table - wrapper document.querySelector("#table-wrapper").appendChild(table); } function diffTable1() { // 輸出表頭：商品、地區、1月、2月、…… 12月 var headTable = ["商品", "地區", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; var header = table.createTHead(); var tr0 = header.insertRow(0); for (var i = 0; i < headTable.length; i++) { var th = tr0.insertCell(tr0.cells.length); th.innerHTML = headTable[i]; } /* 遍歷資料 { 輸出每一行的表格HTML內容 } */ for (var i = 0; i < arr.length; i++) { if (i == 0) { var tr = table.insertRow(table.rows.length); var td = tr.insertCell(0); td.innerHTML = arr[i].product; td.rowSpan = arr.length; var td = tr.insertCell(1); td.innerHTML = arr[i].region; for (var j = 0; j < 12; j++) { var td = tr.insertCell(j + 2); td.innerHTML = arr[i].sale[j]; } } else { var tr = table.insertRow(table.rows.length); var td = tr.insertCell(0);//合併單元格後，後面行少一個單元格 td.innerHTML = arr[i].region; for (var j = 0; j < 12; j++) { var td = tr.insertCell(j + 1); td.innerHTML = arr[i].sale[j]; } } } } function diffTable2() { // 輸出表頭：商品、地區、1月、2月、…… 12月 var headTable = ["地區", "商品", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; var header = table.createTHead(); var tr0 = header.insertRow(0); for (var i = 0; i < headTable.length; i++) { var th = tr0.insertCell(tr0.cells.length); th.innerHTML = headTable[i]; } /* 遍歷資料 { 輸出每一行的表格HTML內容 } */ for (var i = 0; i < arr.length; i++) { if (i == 0) { var tr = table.insertRow(table.rows.length); var td = tr.insertCell(0); td.innerHTML = arr[i].region; td.rowSpan = arr.length; var td = tr.insertCell(1); td.innerHTML = arr[i].product; for (var j = 0; j < 12; j++) { var td = tr.insertCell(j + 2); td.innerHTML = arr[i].sale[j]; } } else { var tr = table.insertRow(table.rows.length); var td = tr.insertCell(0);//合併單元格後，後面行少一個單元格 td.innerHTML = arr[i].product; for (var j = 0; j < 12; j++) { var td = tr.insertCell(j + 1); td.innerHTML = arr[i].sale[j]; } } } } function diffTable3() { // 輸出表頭：商品、地區、1月、2月、…… 12月 var headTable = ["商品", "地區", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; var header = table.createTHead(); var tr0 = header.insertRow(0); for (var i = 0; i < headTable.length; i++) { var th = tr0.insertCell(tr0.cells.length); th.innerHTML = headTable[i]; } for (var i = 0; i < productLen; i++) { for (var z = 0; z < regionLen; z++) { if (z == 0) { var tr = table.insertRow(table.rows.length); var td = tr.insertCell(0); td.innerHTML = arr[z + i * regionLen].product; td.rowSpan = regionLen; var td = tr.insertCell(1); td.innerHTML = arr[z + i * regionLen].region; for (var j = 0; j < 12; j++) { var td = tr.insertCell(j + 2); td.innerHTML = arr[z + i * regionLen].sale[j]; } } else { var tr = table.insertRow(table.rows.length); var td = tr.insertCell(0);//合併單元格後，後面行少一個單元格 td.innerHTML = arr[z + i * regionLen].region; for (var j = 0; j < 12; j++) { var td = tr.insertCell(j + 1); td.innerHTML = arr[z + i * regionLen].sale[j]; } } } } } // 物件或陣列自己根據喜好實現均可 checkBoxGroup(regionGroup, [{ value: 1, text: "華北" }, { value: 2, text: "華南" }, { value: 3, text: "華東" } ]); checkBoxGroup(productGroup, [{ value: 1, text: "手機" }, { value: 2, text: "筆記本" }, { value: 3, text: "智慧音箱" } ]);

相關推薦

百度前端技術學院：第三十一到第三十三天：我是精明的小賣家（一）

var regionGroup = document.getElementById("region-radio-wrapper"); var productGroup = document.getElementById("product-radio-wrapper");

百度前端技術學院：第二十五天到第二十七天 倒數開始 滴答滴 滴答滴

var year=document.getElementById("year-select"); var month=document.getElementById("month-select"); var day=document.g

IFE百度前端技術學院4/24/2018

結果 sheet terms 自然 spa 外部 for link 等價 day1: day2: 好的簡歷： 你可以參考自己的簡歷內容，也可以參考網上一些熱門簡歷內容，比如 羨轍 的簡歷（她簡歷的樣式每年校招簡歷總能看見很多人在復用，所以，希望大家以後做簡歷的時候換個樣式吧

百度前端技術學院--CSS佈局例項

CSS背景圖片佈局 <!doctype html><html><body>...Your content goes here...</body></html>　　給body標籤指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。　　其實，

百度前端技術學院（二）給自己做一個線上簡歷吧

一、製作線上簡歷 二、小問題 HTML是什麼，HTML5是什麼？ HTML(Htper Text Markup Language)超文字標記語言，不是程式語言，而是一種標記語言，標記語言是一套標記標籤，HTML使用標記標籤來描述網頁。 HTML5是最新的HTML標

百度前端學院-基礎學院-第七天到第八天

相同 自己的 http 視口 you css align 其他 知識點 第五天到第六天的內容沒有記筆記，不好不好。 第七天到第八天的學習目標是：學習布局的各種方式。主要包含position相關和Flexbox相關。 知識點： 1、默認情況下，塊級元素的內容寬度是其父元素的寬

百度前端學院-基礎學院-第吳課/第六課

bubuko doc 長度 borde href developer mar 例如 特殊 今天是一個跨天的任務，學習目標是：掌握CSS盒模型及Float； 盒模型要點： 如果盒子的高度被設置為百分比長度，那麽盒子高度不會遵循這個設置了的百分比長度，而是總會采用盒子內容的高

百度前端學院參考答案：第二十五天到第二十七天 倒數開始 滴答滴 滴答滴（1）

編碼 我們現在來做一個最簡單的時鐘，通過小練習來學習 Date，複習定時，然後再練習一下函式的封裝具體需求如下： 在頁面中顯示當前日期及時間，按秒更新 格式為 YYYY 年 MM 月 DD 日 星期 D HH:mm:ss 注意位數的補齊，比如：-- 假設時間為2008年10月10日星期一的1

百度前端學院學習DAY05 and DAY06--三種簡歷

百度前端學院學習DAY05 and DAY06 第五天和第六天 三種簡歷 課程目標 通過閱讀及一個小型練習，掌握 CSS 盒模型及通過Float進行簡單的佈局 課程描述 閱讀 今天我們要學習非常重要的一些知識，這些知識會伴隨著你的前端

百度前端學院第17到18天和第16天的作業

終於學JavaScript了！ 陣列的相關引數 陣列shift刪除第一個元素，pop刪除最後一個元素，返回的都是刪除的元素,unshift在開頭增加一個元素，push在結尾增加元素，splice用於刪除和修改，slice用於切片. *** 資料型別轉換 一元的 + 運算子可用於把變數轉換為數字：如果無法轉換變

百度前端學習日記07——布局（三）Flexbox

enter end develop docs -i ali -s 阻止 div 前言 更多參考MDN flex布局 正文 1.Flexbox模型 主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為

百度前端學院學習Day2

前言       昨天，瞭解了Web開發的基本原理，使用html製作了簡易的簡歷，以及編寫css為文字和字型新增屬性。 4.背景、邊框、列表、連結和選擇器 目標       掌握CSS稍複雜的選擇器，還有背景、邊框等樣式屬性。 閱讀 編碼 #head

百度前端學院學習Day3

前言      之前初步瞭解了盒模式的概念，現在來學習如何佈局。 7、8：學習佈局 目標      學習佈局的各種方式 閱讀 編碼 分別嘗試使用Float、Position或者Flexbox來實現如下需求： 實現一個兩欄佈局，左側佔30%寬度，右側佔7

百度前端學院學習DAY1

9、10：做一個網站 目標      將一個設計稿轉化為網頁，通過這個過程學習各種css知識。 閱讀 按照設計師提供的設計稿，實現HTML頁面，需要將設計稿切分成為最終在頁面中呈現的一個個圖片，我們一般稱之為“切圖”，在不同公司，切圖的工作可能是不同職位做，可能是

前端自學旅程（關於百度前端學院的）

Wandering Saint 一個畢業於不入流的二本大學的學生的前端旅程： 名字：Wandering Saint 專業：天馬行空 愛好：音樂 美術 讀書 最喜歡的歌手：許巍 擅長的樂器：吉他 未來的職業規劃：做一個天馬行空的前端程式猿 人生信仰：還沒出現

百度前端學習日記10——javaScript基本語法

lean his lse highlight ... bject cti arr boolean 1.變量 a.變量類型 Number 數字 String 字符串 Boolean 布爾型true和false Array 數組 Object 對象 b.變量聲明 var n;

百度前端學習日記20——定時器

out val interval fun tint 日記 tin clear 對象 setTimeout("function",time) 設置一個超時對象 setInterval("function",time) 設置一個超時對象 SetInterval為自動重復，set

PaddlePaddle應用於百度視覺技術的工程實踐

負責 手機拍照 升級 互聯網 倉庫 識別 領域 使用 遷移 深度學習的出現，某種程度上改變了我們對計算機視覺的定義。而PaddlePaddle是百度開源的深度學習框架，它是如何支持百度視覺技術，有哪些工程實踐，這篇文章將由百度視覺技術部主任研發架構師劉國翌為大家解答。 以

基於vue2.0實現仿百度前端分頁效果（二）

前言 上篇文章中，已經使用vue實現前端分頁效果，這篇文章我們單獨將分頁抽離出來實現一個分頁元件 先看實現效果圖 程式碼實現 按照慣例，我們在凍手實現的時候還是先想一想vue實現元件的思路 1、需要提前設定哪些引數需要暴露出來給父元件傳遞 <Paging

前端讀者 | 百度前端編碼規範（JS）

本文來自：百度FEX 1 前言 JavaScript在百度一直有著廣泛的應用，特別是在瀏覽器端的行為管理。本文件的目標是使JavaScript程式碼風格保持一致，容易被理解和被維護。 雖然本文件是針對JavaScript設計的，但是在使用各種JavaScript的預編譯語言時(如TypeScript等)時