可动态增加、删除、修改和保存数据的web表格简易实现

时间：2008-10-05 来源：yunyuaner

这里给出一种可动态增加、删除、修改和保存数据的web表格简易实现。思想很常规，javascript代码在关键地方给出了一些注释。有兴趣的朋友可以把玩一下。转载请注明出处！先给出三张效果图：

图一：常态

图二：添加行状态

图三：修改列状态 panama_table.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
.panama_table
{
    font-size:12px;
    font-weight:light;
}
.panama_table_row_odd
{

}
.panama_table_row_even
{
    background-color:gray;
    color: white;
}
.panama_table_cell
{
    width:80px;

    text-align:center;
    cursor: pointer;
}
</style>
<script type="text/javascript" src="../js/net.js"></script>
<script type="text/javascript" src="../js/panama-ajaxtools/panama_table.js"></script>

</head>
<body onload="PanamaTableInit()">

<table cellpadding="2px" cellspacing="0px" style="font-size:12px;font-weight:light">
<tr>
    <td><input type="checkbox" onclick="PanamaTableSelAll()" />全选/取消</td>
    <td><a href="javascript:PanamaTableAppendRow()">添加行</a></td>
    <td><a href="javascript:PanamaTableDeleteRow()">删除行</a></td>
    <td><a href="javascript:PanamaTableSave()">保存</a></td>
</tr>
</table>
<div style="width:300px"><hr /></div>
<table cellpadding="4" cellspacing="0" class="panama_table" id="panama_table" >
<tr><td><input type="checkbox" /></td><td>郭佳</td><td>陈珩</td><td>王赢</td></tr>
<tr><td><input type="checkbox" /></td><td>蔡一</td><td>覃晖</td><td>彭杉</td></tr>
<tr><td><input type="checkbox" /></td><td>杨莉</td><td>李英海</td><td>杜宽</td></tr>
</table>

</body>
</html>

panama_table.js

/**
* Panama-ajaxtools: panama_table
* @version: 0.1 beta 1
* @date: Oct 5th 2008
* @author: yunyuaner
* @contact: [email protected]
*/
function SwitchToEditMode()
{
    var value = this.innerHTML;
    if (this.__mode == "plain")
    {
        this.__mode = "edit";
        var input = document.createElement("input");
        input.id = "__curr";
        input.type = "text";
        input.value = value;
        input.style.width = 60;
        input.style.height = 20;
        input.onblur = SwitchToPlainMode;
        this.replaceChild(input, this.firstChild);
        input.focus();
    }
}
function SwitchToPlainMode()
{
    var parent = this.parentNode;
    parent.innerHTML = this.value;
    parent.__mode = "plain";
}

function PanamaTableInit()
{
    PanamaTableInvalidate();
}
function PanamaTableInvalidate()
{
    var pTable = document.getElementById("panama_table");
    var pTableRows = pTable.getElementsByTagName("tr");
    for (var i = 0; i < pTableRows.length; i++)
    {
        pTableCells = pTableRows[i].getElementsByTagName("td");
        pTableRows[i].className = i % 2 ? "panama_table_row_odd" : "panama_table_row_even";
        for (var j = 1; j < pTableCells.length; j++)
        {
            pTableCells[j].className = "panama_table_cell";
            pTableCells[j].onclick = SwitchToEditMode;
            if (pTableCells[j].__mode == null)
                pTableCells[j].__mode = "plain";
        }
    }
    /* Exclusive of checkbox filed */
    pTable.__cellsPerRow = 3;
}
function PanamaTableGetRowNodeFromCellElem(e)
{
    return e.parentNode.parentNode;
}
function PanamaTableDeleteRow()
{
    var pTable = document.getElementById("panama_table");
    var rowsToDel = new Array();
    var chkboxFileds_NoFiltered = pTable.getElementsByTagName("input");

    /* Select the rows to be delete */
    for (var i = 0, j = 0; i < chkboxFileds_NoFiltered.length; i++)
    {
        if (chkboxFileds_NoFiltered[i].type == "checkbox" && chkboxFileds_NoFiltered[i].checked)
        {
            rowsToDel[j++] = PanamaTableGetRowNodeFromCellElem(chkboxFileds_NoFiltered[i]);

        }
    }

    for (var k = 0; k < rowsToDel.length; k++)
    {
        /* Note: pTable.firstChild of pTable is tbody */
        pTable.firstChild.removeChild(rowsToDel[k]);
    }
    PanamaTableInvalidate();
}
function PanamaTableAppendRow()
{
    var pTable = document.getElementById("panama_table");
    var newRow = document.createElement("tr");
    var newCells = new Array();
    var cellInputs = new Array();

    var chkboxFiledContainer = document.createElement("td");
    var chkboxFiled = document.createElement("input");
    chkboxFiled.type = "checkbox";
    chkboxFiledContainer.appendChild(chkboxFiled);
    newRow.appendChild(chkboxFiledContainer);
    chkboxFiled.focus();

    for (var i = 0; i < pTable.__cellsPerRow; i++)
    {
        newCells[i] = document.createElement("td");
        newCells[i].__mode = "edit";
        cellInputs[i] = document.createElement("input");
        cellInputs[i].type = "text";
        cellInputs[i].style.width = 60;
        cellInputs[i].style.height = 20;
        newCells[i].appendChild(cellInputs[i]);
        newRow.appendChild(newCells[i]);
    }

    /* Note: pTable.firstChild of pTable is tbody */
    pTable.firstChild.appendChild(newRow);

    /* Rebuild table to set table style */
    PanamaTableInvalidate();
}
function PanamaTableSelAll()
{
    var cbList = document.getElementById("panama_table").getElementsByTagName("input");
    var status = this.checked ? false : true;
    for (var i = 0; i < cbList.length; i++)
        cbList[i].checked = status;
    this.checked = status;
}
function PanamaTableSave()
{
    var pTable = document.getElementById("panama_table");
    var rows = pTable.getElementsByTagName("tr");

    /* Change new row from edit mode to plain mode */
    for (var i = 0; i < rows.length; i++)
    {
        cells = rows[i].getElementsByTagName("td");
        /* Skip the chkbox filed */
        for (var j = 1; j < cells.length; j++)
        {
            if (cells[j].firstChild.nodeName.toLowerCase() == "input")
            {
                /* FIXME: value may be null */
                cells[j].innerHTML = cells[j].firstChild.value;
                cells[j].__mode = "plain";
            }
        }
    }

    /* Parse data in table */
    var tableTextList = new Array();
    for (i = 0; i < rows.length; i++)
    {
        var rowTextList = new Array();
        var cells = rows[i].getElementsByTagName("td");
        for (j = 1; j < cells.length; j++)
            rowTextList[j-1] = cells[j].innerHTML;
        tableTextList[i] = rowTextList;
    }
    var xmlDoc = "<panama-table>";
    xmlDoc += "<root>";
    for (var m = 0; m < tableTextList.length; m++)
    {
        xmlDoc += "<panama-row>"
        for (var n = 0; n < tableTextList[m].length; n++)
        {
            xmlDoc += "<panama-cell>" + tableTextList[m][n] + "</panama-cell>";
        }
        xmlDoc += "</panama-row>"
    }
    xmlDoc += "</root>";
    xmlDoc += "</panama-table>";
    /* Note: Encode string from iso-8859-1 to uri */
    xmlDoc = encodeURIComponent(xmlDoc);

    /* Post data to hidden iframe */
    var hiddenIframe = document.createElement("iframe");
    hiddenIframe.style.display = "none";
    hiddenIframe.src = "about:blank";
    hiddenIframe.id = "hiddenIframe"
    document.body.appendChild(hiddenIframe);
    var hiddenIframe = document.getElementById("hiddenIframe");
    var hiddenDocument = hiddenIframe.contentWindow.document;
    var hiddenSrc = "<html><body><form id='hiddenForm' name='hiddenForm' enctype='application/x-www-form-urlencoded'><input id='hiddenXMLTmpBox' name='hiddenXMLTmpBox' type='hidden' /></form></body></html>";
    hiddenDocument.open();
    hiddenDocument.write(hiddenSrc);
    hiddenDocument.close();
    var hiddenForm = hiddenDocument.getElementById("hiddenForm");
    var hiddenXMLTmpBox = hiddenDocument.getElementById("hiddenXMLTmpBox");
    hiddenXMLTmpBox.value = xmlDoc;
    hiddenForm.action = "http://localhost:8080/biobase/poweroper/iframe/autosync.action";
    hiddenForm.submit();
}

AutoSync.java

package biobase.experi;

import java.io.*;
import java.nio.*;
import java.nio.charset.*;
import java.nio.channels.*;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;
import java.net.*;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class AutoSync extends ActionSupport {
    private InputStream inputStream;
    private String hiddenXMLTmpBox;
    public InputStream getInputStream() {
        return inputStream;
    }

    public String getHiddenXMLTmpBox() {
        return hiddenXMLTmpBox;
    }

    public void setHiddenXMLTmpBox(String tmpBox) {
        hiddenXMLTmpBox = tmpBox;
    }

    public void setInputStream(InputStream inputStream) {
        this.inputStream = inputStream;
    }

    public String execute()
    {
        try {
            /* TODO: Parse dirtyTableXML and save */
            String dirtyTableXML = URLDecoder.decode(hiddenXMLTmpBox, "UTF-8");
            System.out.println(dirtyTableXML);
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        StringBuilder xmlText = new StringBuilder();
        xmlText.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
        xmlText.append("<ajax-response>");
        xmlText.append("</ajax-response>");
        String strXMLText = xmlText.toString();
        Charset cset = Charset.forName("utf-8");
        ByteBuffer b = cset.encode(strXMLText);
        this.inputStream = new ByteArrayInputStream(b.array());

        return SUCCESS;
    }



}

struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <package name="biobase-experi" extends="struts-default" namespace="/experi">
        <action name="autosync" class="biobase.experi.AutoSync">
        </action>
    </package>

</struts>