jquery 点击表格变为input可以修改无刷新更新数据

之前已经发了2篇类似的文章《点击变td为input更新》和《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》

这篇功能是一样的，不过实用性可能比不上前面的文章

 

 

演示

 

PHP Code

  "2">如果本例看不到数据请先添加一条记录,点击"?action=add">这里可以添加  $sql="select * from `add_delete_record` where id>0";  $rs=mysql_query($sql);  if ($row = mysql_fetch_array($rs))  {      do {  ?>    "#eeeeee">    class="bigclassname" >"点击修改">echo $row['text']?>        }            while ($row = mysql_fetch_array($rs));  }?>   
       
       
       
       
       
       
       
       
       
       
      echo $row['id']?>

JavaScript Code

  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">/**/</span><span class="comment" style="color:#008000;">/* </span> </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">* 说明：用Jquery的方法，无刷新页面，编辑表格 </span> </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">*/</span><span>   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">$(<span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span>() {   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//给页面中有bigclassname类的标签上加上click函数 </span><span>  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">$(<span class="string" style="color:#0000FF;">".bigclassname"</span><span>).click(</span><span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span>() {   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> objTD = $(</span><span class="keyword" style="color:#0000FF;font-weight:bold;">this</span><span>);   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//先将老的类别名称保存起来,并用trim方法去掉左右多余的空格 </span><span>  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> oldText = $.trim(objTD.text());   </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//构造一个input的标签对象（作用是为了让这个input失效，不然点击多次后，文字会消失） </span><span>  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> input = $(</span><span class="string" style="color:#0000FF;">"<input type='text' value='"</span><span> + oldText + </span><span class="string" style="color:#0000FF;">"' />"</span><span>);   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//当前td的内容变为文本框，并且把老类别名放进去 </span><span>  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">objTD.html(input);   </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//设置文本框的点击事件失效 </span><span>  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">input.click(<span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span>() {   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="keyword" style="color:#0000FF;font-weight:bold;">return</span><span> </span><span class="keyword" style="color:#0000FF;font-weight:bold;">false</span><span>;   </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">});   </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//设置文本框样式，让界面显示的人性化点 </span><span>  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">input.css(<span class="string" style="color:#0000FF;">"font-size"</span><span>, </span><span class="string" style="color:#0000FF;">"16px"</span><span>);   </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">input.css(<span class="string" style="color:#0000FF;">"text-align"</span><span>, </span><span class="string" style="color:#0000FF;">"center"</span><span>);   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">input.css(<span class="string" style="color:#0000FF;">"background-color"</span><span>, </span><span class="string" style="color:#0000FF;">"#ffffff"</span><span>);   </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">input.width(<span class="string" style="color:#0000FF;">"120px"</span><span>);   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//自动选中文本框中的文字 </span><span>  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">input.select();   </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//文本框失去焦点时重新变为文本 </span><span>  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">input.blur(<span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span>() {   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//获得新输入的类别名 </span><span>  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> newText = $(</span><span class="keyword" style="color:#0000FF;font-weight:bold;">this</span><span>).val();   </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//用新的类别名文字替换之前变过来的输入框状态 </span><span>  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">objTD.html(newText);   </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//获取该类别名所对应的ID(bigclassid) </span><span>  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> bigclassid = objTD.prev().text();   </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//将新的类别名进行转码，不然界面以及数据库显示的都是"???"这样的乱码 </span><span>  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">newText = escape(newText);   </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//获取要传到"一般处理文件"(update_bigclassname_2.php)中的URL </span><span>  </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="keyword" style="color:#0000FF;font-weight:bold;">var</span><span> url = </span><span class="string" style="color:#0000FF;">"update.php?id="</span><span> + bigclassid + </span><span class="string" style="color:#0000FF;">"&bigclassname="</span><span> + newText;   </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;"><span class="comment" style="color:#008000;">//AJAX异步更改数据库,data为成功后的回调返回值，用于显示提示信息 </span><span>  </span></span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">$.get(url, <span class="keyword" style="color:#0000FF;font-weight:bold;">function</span><span>(data) {});   </span></span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">  </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">});   </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">});   </span></li> 
      <li style="color:#aa0000;"><span style="color:#000000;">});   </span></li> 
      <li class="alt" style="color:#aa0000;"><span style="color:#000000;">

 

原文地址:http://www.freejs.net/article_biaodan_43.html