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 个答案: