Question

我想用子输入中的值替换我的<td>元素内容，但是我在解决这些值时遇到了问题。

HTML：

<table>
    <tr>
        <td><input type="text" value="value to steal"></td>
    </tr>
    <tr>
        <td><input type="text" value="value to steal"></td>
    </tr>
    <tr>
        <td><input type="text" value="value to steal"></td>
    </tr>
</table>

到目前为止

JS：

$('input').closest('td').text($(this).val());

有人可以解释我做错了什么以及如何解决这个问题？

Answer 1

您可以对每个输入使用each，如果您使用text()，则会替换每个td的内容并删除输入，这样您就可以使用append或{ {1}} DEMO

＆＃13;

prepend

＆＃13;

$('input').each(function() {
  $(this).closest('td').append($(this).val());
})

＆＃13;

Answer 2

@Nenad Vracar的答案非常接近，但它不会像你需要的那样取代<td>的内容。

相反，请尝试以下答案：

$('input').each(function() {
  $(this).closest('td').text($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><input type="text" value="value to steal"></td>
    </tr>
    <tr>
        <td><input type="text" value="value to steal"></td>
    </tr>
    <tr>
        <td><input type="text" value="value to steal"></td>
    </tr>
</table>

问题在于this的实例。一旦您移至最近的<td>，this的值就会变为<td>而不再是<input>。

Answer 3

您可以设置td元素的文本并一次性删除所有输入：

$('td').text(function() {
  return $(this).find('input').val()
});

<强> jsFiddle example

Answer 4

试试这个，希望它能解决你的问题

//If you wantto change the conten on an event, say for example on textbox blur
$( "input[type='text']" ).blur(function() {
  var val = $(this).val();
  var td = $(this).closest('td');
  td.empty()
  td.text( val )
});

//如果您想要将所有内容替换为值

$("input[type='text']").each(function(){
      var val = $(this).val();
      var td = $(this).closest('td');
      td.empty()
      td.text( val )
})

Answer 5

关注此代码段

＆＃13;

$(document).ready(function(){
  
  $('input').each(function() {
  $('input').closest('td').text($(this).val());
})

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><input type="text" value="value to steal"></td>
    </tr>
    <tr>
        <td><input type="text" value="value to steal"></td>
    </tr>
    <tr>
        <td><input type="text" value="value to steal"></td>
    </tr>
</table>

＆＃13;

Answer 6

正如你想要有人解释的那样......它＆＃39;因为你试图在unknown元素上获得val。

实际上，this是指运行代码的函数内的scope d this引用。

所以，你应该......

// I first ensure there is a td parent
$('td input').closest('td').each((function()
{
    // jQuery ensure that this keyword refers to the current 'td' element
    $(this).text($(this).find('input').val());
}));

用来自child的值替换元素文本

6 个答案: