如何获取jquery中输入字段内单击的值？

时间：2016-10-31 09:17:35

标签： javascript jquery 

$(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仅获取输入中的单击值。

2 个答案:

答案 0 :(得分：3)

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

另请注意，委托事件处理程序不应位于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>

答案 1 :(得分：1)

您的问题出在$('.input').val(tdval);，因为您在这里选择所有输入，而您只想在editdiv

内输入

因此，您只需添加一个父选择器来选择特定的input，如下所示：

$('.input', $(this))

＆＃13;
＆＃13; 
$(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', $(this)).val(tdval);
      $('.input', $(this)).focus();
      $(document).on('click', '.submit', function(event) {
        inputval = $('.input', $(this).closest(".editdiv")).val();
        $(this).closest(".editdiv").parent("td").html(inputval);
      });
    }
  });
});
＆＃13; 
@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 {}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题