span可編輯 屬性 html 可編輯td 文字不可 選中


<span contenteditable="true">11111111111111111</span>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>編輯表格數據</title>
    <script src="JavaScript.js"></script>
    <style type="text/css">
        <!--
        body, div, p, ul, li, font, span, td, th {
            font-size: 10pt;
            line-height: 155%;
        }

        table {
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 0px;
            border-left-width: 1px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: none;
            border-left-style: solid;
            border-top-color: #CCCCCC;
            border-right-color: #CCCCCC;
            border-bottom-color: #CCCCCC;
            border-left-color: #CCCCCC;
        }

        td {
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #CCCCCC;
        }

        .EditCell_TextBox {
            width: 90%;
            border: 1px solid #0099CC;
        }

        .EditCell_DropDownList {
            width: 90%;
        }
        -->
    </style>
</head>
<body>
    <form id="form1" name="form1" method="post" action="">
        <h3>可編輯的表格</h3>
        <table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">
            <tr>
                <td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>
                <td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序號</td>
                <td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">商品名稱</td>
                <td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">數量</td>
                <td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">單價</td>
                <td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合計</td>
            </tr>
            <tr>
                <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>
                <td bgcolor="#FFFFFF">1</td>
                <td bgcolor="#FFFFFF" Value="c">C</td>
                <td bgcolor="#FFFFFF">0</td>
                <td bgcolor="#FFFFFF">0</td>
                <td bgcolor="#FFFFFF">0</td>
            </tr>
            <tr>
                <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>
                <td bgcolor="#FFFFFF">2</td>
                <td bgcolor="#FFFFFF" Value="d">D</td>
                <td bgcolor="#FFFFFF">0</td>
                <td bgcolor="#FFFFFF">0</td>
                <td bgcolor="#FFFFFF">0</td>
            </tr>
        </table>
        <br />
        <input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" />
        <input type="button" name="Submit2" value="刪除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />
        <input type="button" name="Submit22" value="重置" onclick="window.location.reload()" />
        <input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />
    </form>
    <script language="javascript">
var tabProduct = document.getElementById("tabProduct");//獲取table對象

// 設置表格可編輯
// 可一次設置多個,例如:EditTables(tb1,tb2,tb2,......)
EditTables(tabProduct);//調用方法 傳遞這個table對象


    </script>
</body>
</html>

js

/**
* JS實現可編輯的表格  
* 用法:EditTables(tb1,tb2,tb2,......);
* Create by Senty at 2008-04-12
**/

//設置多個表格可編輯
function EditTables() {
    for (var i = 0; i < arguments.length; i++) {  //arguments叫做類數組對象
        SetTableCanEdit(arguments[i]); //設置表可以編輯
    }
}

//設置表格單擊事件
function SetTableCanEdit(table) {
    for (var i = 1; i < table.rows.length; i++) { //循環傳遞過來的對象的行  第0行不傳遞
        SetRowCanEdit(table.rows[i]); //設置行可以編輯
    }
}

function SetRowCanEdit(row) {
    for (var j = 0; j < row.cells.length; j++) { //循環傳遞過來的對象的單元格

        //如果當前單元格指定了編輯類型,則表示允許編輯
        var editType = row.cells[j].getAttribute("EditType"); //方法返回指定屬性名的屬性值。
        if (!editType) {       //editType = null  表示單元格沒有指定
            //如果當前單元格沒有指定,則查看當前列是否指定
            editType = row.parentNode.rows[0].cells[j].getAttribute("EditType"); //傳遞過來的行的父元素下的行集合的第一行的指定屬性名的屬性值
        }
        if (editType) {  //單元格指定的有EditType屬性值
            row.cells[j].onclick = function () { //該單元格添加 單擊事件
                EditCell(this); //調用編輯單元格方法  //傳遞單元格對象 
            }
        }
    }

}


//設置指定單元格可編輯
function EditCell(element, editType) {

    var editType = element.getAttribute("EditType");//方法返回指定屬性名的屬性值。
    if (!editType) {
        //如果當前單元格沒有指定,則查看當前列是否指定
        editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");//第一行的當前列是否指定
    }

    switch (editType) {
        case "TextBox": //指定的是輸入框
            CreateTextBox(element, element.innerHTML); //調用創建文本框函數,傳遞td和td中的內容
            break;
        case "DropDownList": //指定的是下拉框
            CreateDropDownList(element);
            break;
        default:
            break;
    }
}

//為單元格創建可編輯輸入框
function CreateTextBox(element, value) {
    //檢查編輯狀態,如果已經是編輯狀態,跳過
    var editState = element.getAttribute("EditState"); //方法返回指定屬性名的屬性值。
    if (editState != "true") { //判斷不在編輯狀態
        //創建文本框
        var textBox = document.createElement("INPUT");
        textBox.type = "text";
        textBox.className = "EditCell_TextBox";


        //設置文本框當前值
        if (!value) { //屬性值為空的時候
            value = element.getAttribute("Value");//獲取td指定屬性名的Value屬性值
        }
        textBox.value = value;//編輯框 內容賦值

        //設置文本框的失去焦點事件
        textBox.onblur = function () {
            CancelEditCell(this.parentNode, this.value); //取消編輯 單元格事件  //傳遞td 和編輯框的內容
        }
        //向當前單元格添加文本框
        ClearChild(element); //清空td中的內容
        element.appendChild(textBox);//td追加這個元素
        textBox.focus(); //獲得焦點
        textBox.select(); //內容全選

        //改變狀態變量
        element.setAttribute("EditState", "true"); //設置指定屬性名和屬性值
        element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);//設置這個td父元素的父元素的currentrow屬性為這個元素的父元素的所在行
    }

}


//為單元格創建選擇框
function CreateDropDownList(element, value) {
    //檢查編輯狀態,如果已經是編輯狀態,跳過
    var editState = element.getAttribute("EditState");//獲取指定屬性名和屬性值
    if (editState != "true") { //判斷不在編輯狀態
        //創建下接框
        var downList = document.createElement("Select"); 
        downList.className = "EditCell_DropDownList";

        //添加列表項
        var items = element.getAttribute("DataItems");
        if (!items) {
            items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");//td所在列的屬性值
        }

        if (items) {
            items = eval("[" + items + "]");
            for (var i = 0; i < items.length; i++) { //遍歷對象
                var oOption = document.createElement("OPTION");
                oOption.text = items[i].text;
                oOption.value = items[i].value;
                downList.options.add(oOption);
            }
        }

        //設置列表當前值
        if (!value) {
            value = element.getAttribute("Value");//獲取td的值
        }
        downList.value = value;

        //設置創建下接框的失去焦點事件
        downList.onblur = function () {
            CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);  //取消編輯單元格
        }

        //向當前單元格添加創建下接框
        ClearChild(element); //清空td下內容
        element.appendChild(downList); //追加下拉框
        downList.focus();//獲得焦點

        //記錄狀態的改變
        element.setAttribute("EditState", "true");
        element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);
    }

}


//取消單元格編輯狀態
function CancelEditCell(element, value, text) {
    element.setAttribute("Value", value); //設置td的Value屬性為編輯框內容
    if (text) {
        element.innerHTML = text;
    } else {
        element.innerHTML = value; //td插入這個傳遞過來的編輯框內容
    }
    element.setAttribute("EditState", "false"); //設置編輯狀態為假

    //檢查是否有公式計算
    CheckExpression(element.parentNode);
}

//清空指定對象的所有字節點
function ClearChild(element) {
    element.innerHTML = "";
}

//添加行
function AddRow(table, index) {
    var lastRow = table.rows[table.rows.length - 1];
    var newRow = lastRow.cloneNode(true);
    table.tBodies[0].appendChild(newRow);
    SetRowCanEdit(newRow);
    return newRow;

}


//刪除行
function DeleteRow(table, index) {
    for (var i = table.rows.length - 1; i > 0; i--) {
        var chkOrder = table.rows[i].cells[0].firstChild;
        if (chkOrder) {
            if (chkOrder.type = "CHECKBOX") {
                if (chkOrder.checked) {
                    //執行刪除
                    table.deleteRow(i);
                }
            }
        }
    }
}

//提取表格的值,JSON格式
function GetTableData(table) {
    var tableData = new Array();
    alert("行數:" + table.rows.length);
    for (var i = 1; i < table.rows.length; i++) {
        tableData.push(GetRowData(tabProduct.rows[i]));
    }
    console.log(tableData);
    return tableData;

}
//提取指定行的數據,JSON格式
function GetRowData(row) {
    var rowData = {};
    for (var j = 0; j < row.cells.length; j++) {
        name = row.parentNode.rows[0].cells[j].getAttribute("Name");
        if (name) {
            var value = row.cells[j].getAttribute("Value");
            if (!value) {
                value = row.cells[j].innerHTML;
            }

            rowData[name] = value;
        }
    }
    //alert("ProductName:" + rowData.ProductName);
    //或者這樣:alert("ProductName:" + rowData["ProductName"]);
    return rowData;

}

//檢查當前數據行中需要運行的字段
function CheckExpression(row) {
    for (var j = 0; j < row.cells.length; j++) {
        expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");
        //如指定了公式則要求計算
        if (expn) {
            var result = Expression(row, expn);
            var format = row.parentNode.rows[0].cells[j].getAttribute("Format");
            if (format) {
                //如指定了格式,進行字值格式化
                row.cells[j].innerHTML = formatNumber(Expression(row, expn), format);
            } else {
                row.cells[j].innerHTML = Expression(row, expn);
            }
        }

    }
}

//計算需要運算的字段
function Expression(row, expn) {
    var rowData = GetRowData(row);
    //循環代值計算
    for (var j = 0; j < row.cells.length; j++) {
        name = row.parentNode.rows[0].cells[j].getAttribute("Name");
        if (name) {
            var reg = new RegExp(name, "i");
            expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));
        }
    }
    return eval(expn);
}

///////////////////////////////////////////////////////////////////////////////////
/**
* 格式化數字顯示方式  
* 用法
* formatNumber(12345.999,'#,##0.00');
* formatNumber(12345.999,'#,##0.##');
* formatNumber(123,'000000');
* @param num
* @param pattern
*/
/* 以下是范例
formatNumber('','')=0
formatNumber(123456789012.129,null)=123456789012
formatNumber(null,null)=0
formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12
formatNumber(123456789012.129,'#0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#0.##')=123,456,789,012.12
formatNumber(12.129,'0.00')=12.12
formatNumber(12.129,'0.##')=12.12
formatNumber(12,'00000')=00012
formatNumber(12,'#.##')=12
formatNumber(12,'#.00')=12.00
formatNumber(0,'#.##')=0
*/
function formatNumber(num, pattern) {
    var strarr = num ? num.toString().split('.') : ['0'];
    var fmtarr = pattern ? pattern.split('.') : [''];
    var retstr = '';

    // 整數部分  
    var str = strarr[0];
    var fmt = fmtarr[0];
    var i = str.length - 1;
    var comma = false;
    for (var f = fmt.length - 1; f >= 0; f--) {
        switch (fmt.substr(f, 1)) {
            case '#':
                if (i >= 0) retstr = str.substr(i--, 1) + retstr;
                break;
            case '0':
                if (i >= 0) retstr = str.substr(i--, 1) + retstr;
                else retstr = '0' + retstr;
                break;
            case ',':
                comma = true;
                retstr = ',' + retstr;
                break;
        }
    }
    if (i >= 0) {
        if (comma) {
            var l = str.length;
            for (; i >= 0; i--) {
                retstr = str.substr(i, 1) + retstr;
                if (i > 0 && ((l - i) % 3) == 0) retstr = ',' + retstr;
            }
        }
        else retstr = str.substr(0, i + 1) + retstr;
    }

    retstr = retstr + '.';
    // 處理小數部分  
    str = strarr.length > 1 ? strarr[1] : '';
    fmt = fmtarr.length > 1 ? fmtarr[1] : '';
    i = 0;
    for (var f = 0; f < fmt.length; f++) {
        switch (fmt.substr(f, 1)) {
            case '#':
                if (i < str.length) retstr += str.substr(i++, 1);
                break;
            case '0':
                if (i < str.length) retstr += str.substr(i++, 1);
                else retstr += '0';
                break;
        }
    }
    return retstr.replace(/^,+/, '').replace(/\.$/, '');
}

 設置文字不可選中后的css 樣式

 

webkit-user-select: none;

user-select: none;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM