原文：http://blog.csdn.net/qq_16769857/article/details/52055349
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script type="text/javascript" src="jquery.min.js"></script>
- <style>
- .btn {
- color: blue;
- background-color: #FFFFFF;
- border: 0px none; //去邊框
- font-family: "宋體";
- font-size: 15px;
- text-decoration:underline; //加下划線
- }
- .btn:hover{
- color:red;
- border: none;
- cursor: hand;
- cursor: pointer;
- text-decoration:underline; //加下划線
- }
- .btn:focus {
- outline: none; //去邊框
- }
- </style>
- <script type="text/javascript">
- $(function(){
- $("input:button").click(function() {
- str = $(this).val()=="編輯"?"確定":"編輯";
- $(this).val(str); // 按鈕被點擊后，在“編輯”和“確定”之間切換
- $(this).parent().siblings("td.'.2-item'").each(function() { // 獲取當前行的其他單元格
- obj_text = $(this).find("input:text"); // 判斷單元格下是否有文本框
- if(!obj_text.length) // 如果沒有文本框，則添加文本框使之可以編輯
- $(this).html("<input type='text' value='"+$(this).text()+"'>");
- else // 如果已經存在文本框，則將其顯示為文本框修改的值
- $(this).html(obj_text.val());
- });
- $(this).parent().siblings("td.'.1-item'").each(function() { // 獲取當前行的其他單元格
- obj_text = $(this).find("select"); // 判斷單元格下是否有文本框
- if(!obj_text.length) // 如果沒有文本框，則添加文本框使之可以編輯
- $(this).html("<select><option value='volvo'>Volvo</option><option value='volvo'>Volvo</option></select>");
- else // 如果已經存在文本框，則將其顯示為文本框修改的值
- $(this).html(obj_text.val());
- });
- });
- });
- </script>
- </head>
- <body>
- <table>
- <tr>
- <td>2</td>
- <td class="1-item">1</td>
- <td class="2-item">2</td>
- <td class="2-item">2</td>
- <td><input class="btn" type="button" value="編輯"></td>
- </tr>
- <tr><td>2</td><td>5</td><td><input type="button" name="btnSubmit" id="btnSubmit" value="編輯"></td></tr>
- <tr><td>3</td><td>8</td><td><input type="button" value="編輯"></td></tr>
- <tr><td>4</td><td>2</td><td><input type="button" value="編輯"></td></tr>
- </table>
- </body>
- </html>
注：樣式實現的功能：按鈕變成超鏈接。其他代碼是可編輯table，如果不可行可能是引用的
- <strong><span style="font-size:18px;">jquery.min.js版本問題</span></strong>