js中实现table的插入、修改、删除

来源：互联网发布：动漫我们的存在知乎编辑：程序博客网时间：2024/04/29 18:31

进来工作慢慢远离web、远离js，看着自己这些年来学习过程中写过的上百个的js demo，感觉还是把它们发上来吧。虽然它们不够完善，但对于js初学者还是比较有用的。整理一下慢慢发上来，算是留念吧。

好了，第一从table开始吧
就是上边是一个表，下边是一些录入控件text ,select
实现了：插入，删除，修改，读取，验证类型唯一性(每种类型只能输入一个记录)
文中的内容直接存成html就能看到效果，所以我就不贴图片了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
</HEAD>
<script>
var flg = false;
var selectedColor = "#99CCCC";
var initColor = "#ffff99";
var selectedRowIndex = "";
var editObj;
function add() {
    var cell;
    var textNode;
        // add head
    var type = document.getElementsByName("type")[0];
    head = type.options[type.selectedIndex].text;
        //check exist
    var hiddenHeads = document.getElementsByName("hiddenHead");
    for (i = 0; i < hiddenHeads.length; i++) {
        if (hiddenHeads[i].value == type.value) {
            alert("这个类型的记录已经存在");
            return;
        }
    }
        //add row
    tbl = document.getElementById("paramTbl");
    rowsLen = tbl.rows.length;
    row = tbl.insertRow(rowsLen);

        //create head tag
    textNode = document.createTextNode(head);
    cell = row.insertCell(0)
    cell.setAttribute("hight", "22");
    cell.appendChild(textNode);
    row.appendChild(cell);
        //add param tag
    for (i = 1; i < 4; i++) {
        paramValue = document.getElementsByName("param" + i)[0].value;
        textNode = document.createTextNode(paramValue);
        cell = row.insertCell(i)
        cell.setAttribute("hight", "22");
        cell.appendChild(textNode);
        row.appendChild(cell);
    }
        //add head value
    hiddenHead = document.createElement("<input type='hidden' name='hiddenHead' value='" + type.value + "'/>");
    cell = row.insertCell(4)
    cell.setAttribute("hight", "22");
    cell.appendChild(hiddenHead);
    row.appendChild(cell);
        //add param value
    for (i = 5; i < 8; i++) {
        paramValue = document.getElementsByName("param" + (i - 4))[0].value;
        hidden = document.createElement("<input type='hidden' name='hiddenParam" + (i - 4) + "' value='" + paramValue + "'/>");
        cell = row.insertCell(i)
        cell.style.display = 'none';
        cell.appendChild(hidden);
        row.appendChild(cell);
    }

    row.onclick = function() {
        rowClick(this);
    };
    row.bgColor = initColor;
    init();
}
function edit() {
    tbl = document.getElementById("paramTbl");
    if (selectedRowIndex == "") {
        alert("please select a row");
        return;
    }
    for (i = 1; i < 4; i++) {
        paramObj = document.getElementsByName("param" + i)[0];
        hiddenObj = document.getElementsByName("hiddenParam" + i)[selectedRowIndex - 1];
        hiddenObj.value = paramObj.value;
        editObj.cells[i].innerText = paramObj.value;
    }
    init();
}
function del() {
    tbl = document.getElementById("paramTbl");
    tbl.deleteRow(selectedRowIndex);
    selectedRowIndex = "";
    init();

}
function rowClick(obj) {
    tbl = document.getElementById("paramTbl");
    if (selectedRowIndex != "") {
        tbl.rows[selectedRowIndex].bgColor = initColor;
    }
    selectedRowIndex = obj.rowIndex;
    obj.bgColor = selectedColor;
        //reset select
    var type = document.getElementsByName("type")[0];
    var hiddenHead = document.getElementsByName("hiddenHead")[selectedRowIndex - 1];
    var opts = type.options;
    if (flg) {
        alert(selectedRowIndex - 1);
        alert(hiddenHead);
        alert(hiddenHead.value);
    }
    for (i = 0; i < opts.length; i++) {
        if (opts[i].value == hiddenHead.value) {
            opts[i].selected = true;
        }
    }
        //copy param value
    for (i = 1; i < 4; i++) {
        paramObj = document.getElementsByName("param" + i)[0];
        hiddenObj = document.getElementsByName("hiddenParam" + i)[selectedRowIndex - 1];
        paramObj.value = hiddenObj.value;
            //alert(hiddenObj.value);
    }
    editObj = obj;
}
function init() {
    for (i = 1; i < 4; i++) {
        param = document.getElementsByName("param" + i)[0];
        param.value = "";
    }
    var type = document.getElementsByName("type")[0];
    type.options[0].selected = true;
}
function test() {

    hiddenObjs = document.getElementsByName("hiddenParam1")
    for (i = 0; i < hiddenObjs.length; i++) {
        alert(hiddenObjs[i].value);
    }
    var hiddenHeads = document.getElementsByName("hiddenHead");
    for (i = 0; i < hiddenHeads.length; i++) {
        alert(hiddenHeads[i].value);
    }
}
function test2() {
    if (flg) {
        flg = false;
    } else {
        flg = true;
    }
}
function reset() {
    tbl = document.getElementById("paramTbl");
    if (selectedRowIndex != "") {
        tbl.rows[selectedRowIndex].bgColor = initColor;
        selectedRowIndex = "";
    }
    for (i = 1; i < 4; i++) {
        param = document.getElementsByName("param" + i)[0];
        param.value = "";
    }
}

</script>
<BODY>
<div style="height:132px; width:100%; overflow-x:auto; overflow-y:auto; background-color:#ffff99;">
    <table id="paramTbl" width="100%">
        <tr>
            <td>类型</td>
            <td>参数1</td>
            <td>参数二</td>
            <td>参数三</td>
        </tr>
    </table>
</div>
<table>
    <tr>
        <td>
            <select name="type" onchange="reset()">
                <option value="typeA">类型A</option>
                <option value="typeB">类型B</option>
            </select>
        </td>
        <td>
            <input type="text" name="param1"/>
        </td>
        <td>
            <input type="text" name="param2"/>
        </td>
        <td>
            <input type="text" name="param3"/>
        </td>
    </tr>
    <tr>
        <td><input type="button" onclick="add()" value="add"/></td>
        <td><input type="button" onclick="edit()" value="edit"/></td>
        <td><input type="button" onclick="del()" value="del"/></td>
        <td></td>
    </tr>
</table>

</BODY>
</HTML>