jQuery實現(xiàn)點擊表格單元格就可以編輯內容的方法【測試可用】

更新時間：2016年08月01日 10:24:40 作者：Quber

這篇文章主要介紹了jQuery實現(xiàn)點擊表格單元格就可以編輯內容的方法,涉及jQuery針對table表格元素的遍歷與動態(tài)操作相關技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)點擊表格單元格就可以編輯內容的方法。分享給大家供大家參考，具體如下：

運行效果截圖如下：

具體代碼如下：

<!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=utf-8" />
<title>jquery表格可編輯修改表格里面的數(shù)值</title>
<meta name="description" content="jquery表格特效制作jquery表格可編輯任意修改里面的數(shù)值" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
  $('table td').click(function(){
    if(!$(this).is('.input')){
      $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){
        $(this).parent().removeClass('input').html($(this).val() || 0);
      });
    }
  }).hover(function(){
    $(this).addClass('hover');
  },function(){
    $(this).removeClass('hover');
  });
});
</script>
<style type="text/css">
/* page styles */
body{font-family:"Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif;font-size:62.5%;}
table{border-collapse:collapse;}
td, th{text-align:center;border:1px solid #ddd;padding:2px 5px;}
caption{margin:0 0 .5em;font-weight:bold;}
/*demo styles*/
table{width:500px;height:200px;margin-left:30px;}
td, th{font-size:1.2em;padding:2px;width:13%;}
th{background-color:#f4f4f4;}
caption{font-size:1.5em;}
table{float:left;margin:40px 40px 0 0;}
.demo{width:500px;margin:0 auto;}
/* input */
td input{border:1px solid orange;background:yellow;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;padding:8px 0;text-align:center;width:60px;margin:-17px 0 0 4px;font-size:1.4em;}
td.input{ padding:0;position:relative;}
td.hover{background:#eee;}
</style>
</head>
<body>
<div class="demo">
  <table>
    <caption>2009年員工產品銷售走勢圖</caption>
    <thead>
      <tr>
        <td></td>
        <th scope="col">food</th>
        <th scope="col">auto</th>
        <th scope="col">household</th>
        <th scope="col">furniture</th>
        <th scope="col">kitchen</th>
        <th scope="col">bath</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Mary</th>
        <td>190</td>
        <td>160</td>
        <td>40</td>
        <td>120</td>
        <td>30</td>
        <td>70</td>
      </tr>
      <tr>
        <th scope="row">Tom</th>
        <td>3</td>
        <td>40</td>
        <td>30</td>
        <td>45</td>
        <td>35</td>
        <td>49</td>
      </tr>
      <tr>
        <th scope="row">Brad</th>
        <td>10</td>
        <td>180</td>
        <td>10</td>
        <td>85</td>
        <td>25</td>
        <td>79</td>
      </tr>
      <tr>
        <th scope="row">Kate</th>
        <td>40</td>
        <td>80</td>
        <td>90</td>
        <td>25</td>
        <td>15</td>
        <td>119</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章: