个人中心
gpt4 book ai didi

javascript - 如何在 jquery 的输入字段中获取单击 的值？

转载 作者：行者123 更新时间：2023-11-30 09:42:50 25 4
gpt4 key购买 nike 

$(document).ready(function() {
  $("td").on("click", function() {
    var tdval, inputval, editdiv = "";
    editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
    if (!$(this).find(".input").length) {
      tdval = $(this).text();
      $(this).html(editdiv);
      $('.input').val(tdval);
      $(".input").focus();
      $(document).on('click', '.submit', function(event) {
        inputval = $(".input").val();
        $(this).closest(".editdiv").parent("td").html(inputval);
      });
    }
  });
});
@CHARSET "UTF-8";
 html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #f0f0f0;
}
div {
  overflow-x: hidden;
}
table {
  border-collapse: collapse;
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
  background: #fff;
}
thead {
  background: #f05858;
  color: #fff;
}
th,
td {
  padding: 15px;
  text-align: left;
  border: 1px solid #ccc;
}
tbody td {
  height: auto;
  cursor: pointer;
  width: 200px;
  overflow: hidden;
}
i {
  float: right;
  cursor: pointer;
}
input[type=text] {
  border: 1px solid #ccc;
  border-radius: 0px;
  height: 20px;
}
button {}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Dynamic Table</title>
  <link href="fonts/css/font-awesome.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

  <div>
    <table>
      <thead>
        <tr>
          <th>First<i class="fa fa-cogs" aria-hidden="true"></i>
          </th>
          <th>Second</th>
          <th>Third</th>
          <th>Fourth</th>
          <th>Fifth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="main.js"></script>
</body>

</html>

我正在尝试构建一个动态表，我希望每个 <td> 都有编辑选项在每一行中。但每当我点击多个 <td>编辑我最近点击了 <td>所有输入字段中的值，如何使用 jquery 仅获取输入中的单击值。

最佳答案

代码中的主要问题是您正在访问所有 .input 元素，即使可能有多个实例也是如此。相反，您应该使用 DOM 遍历来仅访问那些与引发事件的元素相关的元素，或者与正在附加的 HTML 相关的元素。

另请注意，委托(delegate)的事件处理程序不应位于 click 处理程序内。试试这个:

$(document).ready(function() {
  $("td").on("click", function() {
    var $td = $(this);
    var $editdiv = $('<div class="editdiv"><input type="text" class="input"><button class="submit"><i class="fa fa-check"></i></button></div>');
    
    if (!$td.find(".input").length) {
      var tdText = $td.text();
      $td.html($editdiv);
      $editdiv.find('.input').val(tdText).focus();
    }
  });
  
  $(document).on('click', '.submit', function(event) {
    var inputval = $(this).prev(".input").val();
    $(this).closest(".editdiv").parent("td").html(inputval);
  });
});
@CHARSET "UTF-8";
 html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #f0f0f0;
}
div {
  overflow-x: hidden;
}
table {
  border-collapse: collapse;
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
  background: #fff;
}
thead {
  background: #f05858;
  color: #fff;
}
th,
td {
  padding: 15px;
  text-align: left;
  border: 1px solid #ccc;
}
tbody td {
  height: auto;
  cursor: pointer;
  width: 200px;
  overflow: hidden;
}
i {
  float: right;
  cursor: pointer;
}
input[type=text] {
  border: 1px solid #ccc;
  border-radius: 0px;
  height: 20px;
}
button {}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Dynamic Table</title>
  <link href="fonts/css/font-awesome.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <div>
    <table>
      <thead>
        <tr>
          <th>First<i class="fa fa-cogs" aria-hidden="true"></i>
          </th>
          <th>Second</th>
          <th>Third</th>
          <th>Fourth</th>
          <th>Fifth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="main.js"></script>
</body>

</html>

关于javascript - 如何在 jquery 的输入字段中获取单击 <td> 的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40339322/

25 4 0
文章推荐： javascript - 如何检查给定的 Web 应用程序中是否使用了 jQuery？
文章推荐： java - 使用自定义类进行 Spring 日志记录
文章推荐： java - 将字符串输出创建到 SD 卡上可访问的文件时出现问题
文章推荐： machine-learning - 我有两个计算 'cosine similarity' 的公式，有什么区别？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com