javascript - 如何获取 td 的值并将其传递到每个 td 元素的输入中？

Question

我仍然是 jQuery 世界的新手:)我正在制作看起来像这样的东西，我的问题是获取每个 <td> 中的文本并将其传递给输入。

我有这个代码:

<div class="grid-l1">
  <table>
    <tr>
      <td>
        Testing
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        Testing 2
        <input type="text">
      </td>
    </tr>
  </table>
    <span class="edit">Edit</span>
    <span class="update">Update</span>
</div>

这是我的 jQuery 代码:

<script>
    $(document).ready(function(){
        $('body').on('click', '.edit', function() {
            $(this).hide();
            $('table tr td input').show();
            $('.update').show();
        });

        $('.update').click(function(){
            $(this).hide();
            $('table tr td input').hide();
            $('.edit').show();
        });
    });
</script>

当我单击“编辑”时，如何获取 td 文本并将其传递到 td 元素上的每个输入中？

我会感谢你们所做的每一个回应。提前致谢。

Answer 1

您需要获取包含输入的td的text()并设置其值。试试这个:

$('body').on('click', '.edit', function() {
    $(this).hide().closest('div').find('table input').val(function() {
        return $.trim($(this).closest('td').text());
    });
    $('table tr td input, .update').show();
});

Example fiddle