js_table动态增加和删除

Posted 2020-10-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js_table动态增加和删除相关的知识，希望对你有一定的参考价值。

<!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动态增加和删除的主要内容，如果未能解决你的问题，请参考以下文章

ViewPager2 无法动态添加删除片段

Windows 使用Button动态给ListView控件增加和删除一行

利用jquery.ajax在jsp页面动态生成table，可以增加修改，并支持一行和多行删除

正确地将片段插入和删除到 viewpager

是否可以动态编译和执行 C# 代码片段？

如何使用 jquery 从 asp.net 视图模型中动态删除行而不删除集合中的其余下一个对象