在jQuery中訪問當前元素之前的元素

Question

我有以下HTML表。

<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
    <tbody>
        <tr role="row" class="odd">
            <td class="sorting_1">
                <input type="text" class="form-control" value=""> </td>
            <td>
                <input type="text" class="form-control" value=""> </td>
            <td>
                <input type="text" class="form-control" value=""> </td>
            <td class="center">
                <button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button>
            </td>
        </tr>
    </tbody>
</table>

當我單擊類為“ btn green”的按鈕時，將通過使用委托事件處理程序來生成新行，如下所示。

$('#sample_editable_1').on('click', ".btn green", function() {
    $(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
});

但是，當我創建新行時，我需要上一行的“添加新”按鈕消失。 我可以在jQuery中使用hide（）函數，但是如何訪問上一行？ 以下內容不起作用。

$( row ).prev()

Answer 1

您可以hide()使用this上下文單擊的按鈕。 另外，您的選擇器不正確，應該是".btn.green"而不是".btn green"

$('#sample_editable_1').on('click', ".btn.green", function() {
  $(this).hide();
  //Rest of the code
});

  $('#sample_editable_1').on('click', ".btn.green", function() { $(this).hide(); $(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info"> <tbody> <tr role="row" class="odd"> <td class="sorting_1"> <input type="text" class="form-control" value=""> </td> <td> <input type="text" class="form-control" value=""> </td> <td> <input type="text" class="form-control" value=""> </td> <td class="center"> <button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus">Add</i> </button> </td> </tr> </tbody> </table> 

Answer 2

您不能只隱藏剛剛單擊的按鈕，即

    $('#sample_editable_1').on('click', ".btn green", function() {
        $(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
        $(this).hide();
    });

Answer 3

我發現有什么可以嘗試的，更多閱讀此

$("#addrows").click(function () {
     $("#mytable").each(function () {
         var tds = '<tr>';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td>' + $(this).html() + '</td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });
});

Answer 4

嘗試這樣：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
  <td class="sorting_1">
    <input type="text" class="form-control" value="">
  </td>
  <td>
    <input type="text" class="form-control" value="">
  </td>
  <td>
    <input type="text" class="form-control" value="">
  </td>
  <td class="center">
    <button id="sample_editable_1_new" class="btn green"> <i class="fa fa- plus">Add</i> 
    </button>
  </td>
</tr>
</tbody>
</table>

jQuery：

 $('#sample_editable_1').on('click', ".btn.green", function() {
  $(this).hide();
  $(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>');
});

jsfiddle： https ://fiddle.jshell.net/f4ux0bcs/