Question

我有以下脚本。

如您所见，可以通过按钮添加多行。 row.names=NULL删除行并触发x函数。

deleteRow

$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))

function deleteRow(e) {
  let deleteBtn = $(e.target).closest(".deleteMe");
  deleteBtn.closest('tr').remove()
  console.log("Deleted post_id with number: ")
}

function ourClickDispatcher(e) {
  let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
  let targetButtonParent = targetButton[0].parentElement.parentElement
  let randNumb = Math.floor(Math.random() * 10) + 1

  targetButtonParent.insertAdjacentHTML('afterend', `
             <tr>
                <td></td>
                <td>
                    <img src="" alt="" height="42" width="42">
                    <a href="" data-post_id="${randNumb}">
                        Test ${randNumb}
                    </a>
                </td>    
                <td class="deleteMe">
                        <button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
                    </td>   
             </tr>
            `)
}

我想<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableProd" style="float: left;" class="table table-bordered"> <tbody> <tr> <td>Product 2</td> <td> <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2"> Add Product 2 </button> </td> </tr> <tr> <td>Product 3</td> <td> <button type="button" data-exists="product3" class="btn btn-primary btn-sm product3"> Add Product 3 </button> </td> </tr> <tr> <td>Product 4</td> <td> <button type="button" data-exists="product4" class="btn btn-primary btn-sm product4"> Add Product 4 </td> </tr> </tbody> </table> - 与console.log()函数一样deleteRow()，可以在属性post_id中找到，例如f.ex.以下内容：

data-post_id

有关如何从我按下的按钮找到Deleted post_id with number: 1的任何建议吗？

感谢您的回复！

Answer 1

您可以执行以下操作：

function deleteRow(e) {
  let deleteBtn = $(e.target).closest(".deleteMe");
  const postId = deleteBtn.closest('tr').find("a[data-post_id]").data('post_id');
  deleteBtn.closest('tr').remove();
  console.log("Deleted post_id with number: ${postId}")
}

Answer 2

您还可以使用$(e.target).parent().prev().find("a").attr("data-post_id")查找属性值。这是工作片段

$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))

function deleteRow(e) {
  let deleteBtn = $(e.target).closest(".deleteMe");
  deleteBtn.closest('tr').remove()
  var id = $(e.target).parent().prev().find("a").attr("data-post_id")
  console.log("Deleted post_id with number: "+id)
}

function ourClickDispatcher(e) {
  let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
  let targetButtonParent = targetButton[0].parentElement.parentElement
  let randNumb = Math.floor(Math.random() * 10) + 1

  targetButtonParent.insertAdjacentHTML('afterend', `
             <tr>
                <td></td>
                <td>
                    <img src="" alt="" height="42" width="42">
                    <a href="" data-post_id="${randNumb}">
                        Test ${randNumb}
                    </a>
                </td>    
                <td class="deleteMe">
                        <button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
                    </td>   
             </tr>
            `)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>Product 2</td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                            Add Product 2
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Product 3</td>
      <td>
        <button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
                                            Add Product 3
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Product 4</td>
      <td>
        <button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
                                            Add Product 4
                                     
      </td>
    </tr>
  </tbody>
</table>

在tr中获取数据属性

2 个答案: