如何僅在表的一行中重新加載值

Question

我有一個表，表中有一些數據，每行的最后一列有一個刷新按鈕。

我想要的是當我單擊某行中的一些刷新按鈕時，僅該行應重新加載。

但是現在發生的是，當我單擊刷新按鈕時，每一行都被重新加載，

怎么會這樣

這是我使用的代碼：

<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".b1").load("content.txt");
    $(".b2").load("content1.txt");
  });
});
</script>
</head>
<body>


<table border="1">
<tr><td class="b1"></td><td class="b2"></td><td class="b1"></td><td class="b2"></td><td class="buto"><button>Refresh</button></td></tr>
<tr><td class="b1"></td><td class="b2"></td><td class="b1"></td><td class="b2"></td><td class="buto"><button>Refresh</button></td></tr>
<tr><td class="b1"></td><td class="b2"></td><td class="b1"></td><td class="b2"></td><td class="buto"><button>Refresh</button></td></tr>
<tr><td class="b1"></td><td class="b2"></td><td class="b1"></td><td class="b2"></td><td class="buto"><button>Refresh</button></td></tr>
<tr><td class="b1"></td><td class="b2"></td><td class="b1"></td><td class="b2"></td><td class="buto"><button>Refresh</button></td></tr>
<tr><td class="b1"></td><td class="b2"></td><td class="b1"></td><td class="b2"></td><td class="buto"><button>Refresh</button></td></tr>
<tr><td class="b1"></td><td class="b2"></td><td class="b1"></td><td class="b2"></td><td class="buto"><button>Refresh</button></td></tr>
</table>
</body>
</html>

Answer 1

使用this參考

$("button").click(function(){
  $(this).parents('tr').find(".b1").load("content.txt");
  $(this).parents('tr').find(".b2").load("content1.txt");
});

要么

$("button").click(function(){
  $(this).parent().siblings(".b1").load("content.txt");
  $(this).parent().siblings(".b2").load("content1.txt");
});

Answer 2

$(".b1")和$(".b2")選擇具有該類的每個元素。 您需要使用以下內容基於按鈕所在的行進行過濾：

$("button").click(function(){
    var $row = $(this).closest("tr");
    $row.find(".b1").load("content.txt");
    $row.find(".b2").load("content1.txt");
});

如何僅在表的一行中重新加載值

問題描述

2 個解決方案

解決方案1
2 已采納 2013-09-24 04:32:54

解決方案2
1 2013-09-24 04:34:00

如何僅在表的一行中重新加載值

問題描述

2 個解決方案

解決方案1 2 已采納 2013-09-24 04:32:54

解決方案2 1 2013-09-24 04:34:00

解決方案1
2 已采納 2013-09-24 04:32:54

解決方案2
1 2013-09-24 04:34:00