用JQuery去实现单个表格中的td数据修改

最新推荐文章于 2023-03-28 14:24:57 发布

原创最新推荐文章于 2023-03-28 14:24:57 发布 · 1.1w 阅读

4 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要介绍如何利用JQuery实现对HTML表格中td元素的数据进行修改，提供了相关的JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要学习资料的+微信公众号学习资源后台找我

本人比较忙我看到了会在后台帮你，谢谢关注啦

JS代码如下：

$(document).ready(function(){
    var tds =$("td");
    tds.click(tdclick);
});

function tdclick(){
      var td =$(this);
      var tdtext =td.text();
      td.html("");
      var inputtext =$("<input>");
      inputtext.attr("value",tdtext);

          inputtext.keyup(function(event){
             var keycode = event || window.event;
              var code =keycode.keyCode;
              if(code == 13){
                  var inputtext =$(this);
                  var tdtext =inputtext.val();
                  var ts =inputtext.parent();
                  ts.html(tdtext);
                  ts.click(tdclick);
              }

          });

      td.append(inputtext);
      var aa =inputtext.get(0);
      aa.select();
      td.unbind();

};

HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQueryEdit</title>
<!--<link type="text/css" rel="stylesheet" href="css/edit.css" />-->
<script type="text/javascript" src="jslib/jquery-2.1.4.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>

</head>
<body>
  <table border="1">
      <tbody>
       <tr>
           <td>123123</td>
           <td>456456</td>
       </tr>
      </tbody>

  </table>
</body>
</html>