模拟Windows系统的文件夹点击改名的功能。例（table行点击内容进行更改内容）

本文链接：https://blog.youkuaiyun.com/zhang678991/article/details/89145669

本文分享了一个使用HTML、CSS和jQuery实现的表格单元格点击修改内容的示例，模拟了Windows系统中文件夹的改名功能，适用于前端开发者学习。

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

近期有很多小伙伴想写Windows系统的文件夹点击改名的功能，现在我们就以table行点击更改内容的例子模拟一个吧，~分享给大家！

不说了直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    td,th{
      width: 200px;
      text-align: center;
      border: 1px solid #dddddd;
    }
    .changeName{
      display: inline-block;
      width: 100%;
    }
  </style>
</head>
<body>
<table>
  <thead></thead>
  <tbody>
  <tr class="testt">
    <td><span class="changeName">1</span></td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  </tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  var changeName = $(".changeName");
  changeName.click(function () {
    var text = changeName.html();
    var inputText = $("<input style='max-width: 100px;min-width: 50px' type='text'/>"); //声明需要插入的input
    inputText.val(changeName.html());//将本来单元格td内span内容copy到插入的文本框input中
    changeName.html(""); //删除原来单元格td内span内容
    inputText.appendTo(changeName).focus();
    inputText.blur(function () {
      changeName.html(inputText.val());
      // 自行判断，如果输入内容为空则不做更改
      if (changeName.html() === "") {
        changeName.html(text)
      }
      //接下来就是你的请求啦！！！
    });
  })
</script>