如何獲得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

您需要使用text()獲取td的text() ，然后將其添加到輸入val 。

這里的代碼：

$(document).ready(function(){
    $("input").hide();
        $('body').on('click', '.edit', function() {
            $(this).hide();
            $("table td").each(function() {
                $(this).find("input").val($.trim($(this).text()))
            });
            $('table tr td input,.update').show();
        });

        $('.update').click(function(){
            $(this).hide();
            $('table tr td input').hide();
            $('.edit').show();
            $("table input").each(function() {
                $(this).parent().text($(this).val())
            });
        });
    });

演示 ： http : //jsfiddle.net/1yz8dc3t/

Answer 2

您將需要獲取包含input的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();
});

小提琴的例子