JQuery小表格

時間 2019-12-09

標籤 jquery 表格欄目 JQuery 简体版

原文原文鏈接

啊哈，初學JQuery，閒來無事，好奇表格的編輯功能怎麼用最簡單的方法實現哇javascript

因而乎！！！css

index.htmlhtml

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>能夠編輯的表格</title>
    <link rel="stylesheet" type="text/css" href="css/editTable.css">
    <!-- <script type="text/javascript" src="jquery-3.2.1.min.js"></script> -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/editTable.js"></script>

</head>
<body>
    <table>
        <thead>
            <t>
                <th colspan="2">   鼠標點擊表格項就能夠編輯
                </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th>學號</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>000001</td>
                <td>張三</td>    
            </tr>
            <tr>
                <td>000002</td>
                <td>李四</td>    
            </tr>
            <tr>
                <td>000003</td>
                <td>王五</td>    
            </tr>
            <tr>
                <td>000004</td>
                <td>趙六</td>    
            </tr>
        </tbody>
    </table>
</body>
</html>

editTable.cssjava

table {
    border:1px solid black;
    border-collapse: collapse;
    width:400px;
}

table td {
    border:1px solid black;
    width: 50%;
}

tbody th {
    background-color: #A3BAE9;
}
table th {
    border:1px solid black;
    width: 50%;
}

editTable.jsjquery

$(function (){
    //找到偶數行
    //使用even是爲了把經過tbody tr返回的全部tr元素中，
    //在數組裏面下標是偶數的元素返回，由於這些纔是咱們指望的tbody的奇數行
    $("tbody tr:even").css("background-color","#ECE9D8");
    //須要找到全部的學號單元格
   // $("tbody td:even").css("background-color","red");
    var numTd = $("tbody td:even");
    numTd.click(function(){
      //找到當前鼠標點擊的td
       var tdObj = $(this) ;
       if (tdObj.children("input").length > 0) {
           //當前td中input不執行click處理
               return false;
       }
       var text = tdObj.html();
        //清空
       tdObj.html("");
        //建立文本框
        //去掉文本框
        //設置文本框的文字字體爲16px
        //使文本框的寬度和td的寬度相同
        //設置文本框的背景色
        //插入以前將當前的內容放到文本框中
       var inputObj=$("<input type='text'>").css("border-width","0")
           .css("font-size","16px")
           .css("background-color",tdObj.css("background-color"))
           .width(tdObj.width()).val(text)
           .appendTo(tdObj);
           //使文本框插入以後就被選中
           //inputObj.get(0).select();//safari瀏覽器不支持
       inputObj.trigger("focus").trigger("select");//全部瀏覽器都支持
       inputObj.click(function(){
           return false;
       });
       //處理文本框上回車和esc按鍵的操做
       inputObj.keyup(function(event){
           //獲取當前鍵值
           var keycode = event.which;
               //處理回車的狀況
            if (keycode == 13) {
                //獲取當前文本框的內容
                var inputtext = $(this).val();
                //將td的內容修改爲文本框中的內容
                tdObj.html(inputtext);
            }
               //處理esc的狀況
           if (keycode == 27) {
               //將td中的內容還原成text
               tdObj.html(text);
           }
       });
     });
});