js_table動態增加和刪除
阿新 • • 發佈：2017-08-11
ntb ref ctype efi lob logs idt pen str
html頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表格練習</title> <style type="text/css"> #table { width: 450px; height: 150px; border: #0C9 1px solid; border-collapse: collapse; }.button:hover { background-color: #4CAF50; } td:hover { background-color: goldenrod; } </style> </head> <body> <h1>表格生成練習</h1> 行數： <input type="number" id="row" value="3"> 列數：<input type="number" id="column" value="4"> <button type="reset" id="Reset" class="button" onclick="reset()">重置</button> <button type="button" class="button" onclick="generat()">生成表格</button> <hr> 表格1 <button type="button" class="addRow"onclick="addRow(‘rowIndex‘)">插入行</button> <button type="button" class="delRow" onclick="delRow(‘rowIndex‘)">刪除行</button> <button type="button" class="addCol" onclick="addCol(‘colIndex‘)">插入列</button> <button type="button" class="delCol" onclick="delCol(‘colIndex‘)">刪除列</button> <button type="button" class="recolor" onclick="reCol(‘rowIndex‘,‘colIndex‘)">重新著色</button> <div id="d1" type="text"></div> <script type="text/javascript" src="JavaScript.js"></script> <script type="text/javascript" src="column.js"></script> <script type="text/javascript" src="rows.js"></script> </body> </html>
js-add/del-row-col頁面
var table = null; //生成表格 function generat() { //創建table表格 //refresh //document.getElementById("d1").innerHTML = ""; //獲取行數值 var row = document.getElementById("row").value; if (row == "") { alert("row is null"); } //獲取列數值 var column = document.getElementById("column").value; if (column == "") { alert("column is null"); } var table = document.createElement("table"); table.setAttribute("id", "table"); table.setAttribute("border", "1"); table.setAttribute("cellspacing", "0"); for (var i = 0; i < row; i++) { //alert(rang); //創建tr var tr = document.createElement("tr"); for (var j = 0; j < column; j++) { //創建td var td = document.createElement("td"); //td.setAttribute("onclick","display(this)"); var txt = document.createTextNode(i); td.appendChild(txt); tr.appendChild(td); } table.appendChild(tr); } document.getElementById("d1").appendChild(table); //添加監聽器 table.addEventListener("click", display, false); } (generat()); //獲取鼠標點擊的行和列 function display(event) { var colIndex = null; var rowIndex = null; var element = event.srcElement || event.target; if (!element) return; if (element.tagName != "TD") return; colIndex = element.cellIndex; rowIndex = element.parentNode.rowIndex; console.log("row:" + rowIndex + ", col:" + colIndex); return rowIndex, colIndex; //if (rowCount == undefined) //{ // colCount = colCount - 1; // var tdObj = event.srcElement; // var trObj, tableObj; // while(colCount > 0) // { // colCount--; // } // while (tdObj.tagName != "TD") // { // tdObj = tdObj.parentNode; // } // trObj = tdObj.parentNode; // tableObj = trObj.parentNode; // if (tableObj.tagName != "table") // { // tableObj = tableObj.parentNode; // } // rowCount = trObj.rowIndex //} //table = document.createElement("table"); //event.stopPropagation; } //刪除row function delRow(rowIndex) { table = document.getElementById("table"); if (!table) { alert("此table不存在"); return 0; } if (!isNaN(rowIndex)) { alert("請選擇要刪除的行"); } else { confirm("刪除該行??"); table.deleteRow(rowIndex); } } //刪除列 function delCol(colIndex) { table = document.getElementById("table"); if (!table) { alert("此tr不存在"); return 0; } if (!isNaN(colIndex)) { alert("請選擇要刪除的列"); } else { confirm("刪除該列?"); for (var i = 0; i < table.rows.length; i++) { table.rows[i].deleteCell(colIndex); } } } //插入行 function addRow(rowIndex) { table = document.getElementById("table"); if (!table) { alert("此table不存在"); return 0; } if (!isNaN(rowIndex)) { alert("請選擇要刪除的行"); } else { confirm("插入行??"); var tr = document.createElement("tr"); for (var j = 0; j < table.rows[0].cells.length; j++) { //創建td var td = document.createElement("td"); td.style.backgroundColor = "green"; tr.appendChild(td); } table.appendChild(tr); ////api 自有方法 ////var x = row.insertCell(0); ////var y = row.insertCell(1); ////x.innerHTML = "0"; ////y.innerHTML = "1"; //var row = table.insertRow(rowIndex); //for (var k = 0; k < table.rows[0].cells.length; k++) { // var cell = row.insertCell(); // cell.innerHTML = "addrow"; //} } } //插入列 function addCol(colIndex) { table = document.getElementById("table"); if (!table) { alert("此tr不存在"); return 0; } if (!isNaN(colIndex)) { alert("請選擇要插入的列"); } else { confirm("插入該列?"); for (var i = 0; i < table.rows.length; i++) { table.rows[i].insertCell(colIndex).style.backgroundColor="red"; } } } ////重置 function reset() { document.getElementById("row").value = null; document.getElementById("column").value = null; document.getElementById("d1").innerHTML = null; }
js-- mouse調整行row
var table = document.getElementById("table"); //var headerRows = []; //for (var i = 1; i < tblObj.rows.length; i++) { // headerRows[i] = tblObj.rows[i].cells[0]; //} var mousedown = false; var resizeable = false; var targetTd; var screenYStart = 0; var tdHeight = 0; var headerHeight = 0; //for (var i = 1; i < headerRows.length; i++) { // //添加頭部單元格事件 // addListener(headerRows[i], "mousedown", onmousedown); // addListener(headerRows[i], "mousemove", onmousemove); //} table.addEventListener("mousedown", onmousedown); table.addEventListener("mousemove", onmousemove); function onmousedown(event) { console.log(event.target + onmousedown); if (resizeable == true) { var evt = event || window.event; mousedown = true; screenYStart = evt.screenY; tdHeight = targetTd.offsetHeight; headerHeight = table.offsetHeight; } } function onmousemove(event) { console.log(event.target + onmousemove); var evt = event || window.event; var srcObj = getTarget(evt); var offsetY = evt.offsetY if (mousedown == true) { var height = (tdHeight + (evt.screenY - screenYStart)) + "px";//計算後的新的寬度 targetTd.style.height = height; table.style.height = (headerHeight + (evt.screenY - screenYStart)) + "px"; } else { if (srcObj.offsetHeight - evt.offsetY <= 10) { targetTd = srcObj; resizeable = true; srcObj.style.cursor = ‘row-resize‘;//修改光標樣式 } else if (evt.offsetY <= 10) { targetTd = table.rows[srcObj.parentNode.rowIndex - 1]; resizeable = true; srcObj.style.cursor = ‘row-resize‘; } else { resizeable = false; srcObj.style.cursor = ‘default‘; } } } document.onmouseup = function (event) { console.log(event.target + onmouseup); tartgetTd = null; coltargetTd = null; resizeable = false; mousedown = false; colmousedown = false; colresizeable = false; document.body.style.cursor = ‘default‘; } function getTarget(evt) { return evt.target || evt.srcElement; } function addListener(element, type, listener, useCapture) { element.addEventListener ? element.addEventListener(type, listener, useCapture) : element.attachEvent("on" + type, listener); }
js-- mouse調整列 col
var tTD; var table = document.getElementById("table"); //bianli row //for (var i = 0; i < table.rows.length; i++) { // //bianli row--col // for (var j = 0; j < table.rows[i].cells.length; j++) { table.onmousedown = function () { //記錄單元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { console.log(event.target + onmousedown); // this.style.cursor = ‘col-resize‘; tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } //if (event.offsetY > event.offsetHeight-10) { // tTD.mouseDown = true; // var tHeight = event.offsetHeight; // var tabHeight = table.offsetHeight; //} //記錄Table寬度 //table = tTD; while (table.tagName != ‘TABLE‘) table = table.parentElement; //tTD.tableWidth = table.offsetWidth; }; table.onmouseup = function () { //結束寬度調整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = ‘default‘; }; table.onmousemove = function () { //更改鼠標樣式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = ‘col-resize‘; else this.style.cursor = ‘default‘; //取出暫存的Table Cell if (tTD == undefined) tTD = this; //調整寬度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = ‘default‘; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //調整列寬 tTD.style.width = tTD.width; tTD.style.cursor = ‘col-resize‘; //調整該列中的每個Cell table = tTD; while (table.tagName != ‘TABLE‘) table = table.parentElement; /// for (j = 0; j < table.rows.length; j++) { table.rows[j].cells[tTD.cellIndex].width = tTD.width; } //調整整個表 //table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth); //table.style.width = table.width; } }; // } //}
js_table動態增加和刪除