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>
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>
2 Answers
Reset to default 2use this reference
$("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");
});
$(".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:
$("button").click(function(){
var $row = $(this).closest("tr");
$row.find(".b1").load("content.txt");
$row.find(".b2").load("content1.txt");
});