javascript 如何仅在表格的一行中重新加载值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18972986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 13:54:30  来源:igfitidea点击:

How to reload a value in only one row of table

javascriptjqueryhtml

提问by MintY

i am have a table and there are some data in tables, and i have a refresh button in the last column of every row.

我有一张表格,表格中有一些数据,每行的最后一列都有一个刷新按钮。

what i want is when i click some refresh button in some row only that row should get reloaded.

我想要的是当我单击某行中的某个刷新按钮时,只应重新加载该行。

but now what is happening is when i click the refresh button every row is getting reloaded,,,

但现在发生的事情是当我点击刷新按钮时,每一行都被重新加载,,,

How can this?

这怎么能

Here is the code i have used:

这是我使用的代码:

<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>

采纳答案by bipen

use thisreference

使用this参考

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

or

或者

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

回答by Ken Herbert

$(".b1")and $(".b2")are selecting every element with that class. You need to filter based on the row the button is in using something like this:

$(".b1")并且$(".b2")正在选择具有该类的每个元素。您需要根据按钮所在的行使用以下内容进行过滤:

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