I have a table with dynamically changing rows items.
Among the rows there is a small button / link for each unit.
Eg
Data1 | LinkButton
Data2 | LinkButton
Data3 | LinkButton
Data4 | LinkButton
Data5 | LinkButton
Data6 | LinkButton
What i want is that when i click on the link button ,i need to know which row is selected?Can any one give me pointers on how that can be done?
You help will be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/main.css" type="text/css" media="screen, projection" rel="stylesheet" />
</head>
<body><center>
<div id="message" style="display: none;">
</div>
<div id="waiting" style="display: none;">
Please wait<br />
<img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
</div>
<form action="" id="searchForm">
<label for="search">Matter Search:</label> <input type="text" name="search" id="search" />
<input type="submit" id="submit" value="Submit" />
<a href="#">Link</a>
</form>
<div id="matterTableDiv" style="display: none;">
List of Matters
<table id="matterTable" border="1">
<thead>
<th>Matter Names</th>
<th>Matter Number</th>
<th>Description</th>
<th></th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="matterDetailTableDiv" style="display: none;">
Matter Detail Table
</div>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').focus();
$('#submit').click(function(){
$('#message').hide(200);
$("#matterTableDiv").hide(200);
$("#matterTable tbody").text("");
$('#waiting').show(200);
$('#searchForm').hide(200);
$.ajax({
type : 'POST',
url : 'post.php',
dataType : 'json',
data: {
search : $('#search').val()
},
success : function(data){
if(data.msg == "[]" ){
$('#waiting').hide(200);
$('#message').removeClass().addClass('error')
.text('There was an error.').show(200);
$('#searchForm').show(200);
}
$('#waiting').hide(200);
$('#matterTableDiv').removeClass().addClass((data.error === true) ? 'error' : 'success')
if(data.error == false){
var str = JSON.parse(data.msg);
$("#matterTableDiv").show(200);
//alert("List :" + str.length);
//alert("List :" + str.toString());
$("#matterTable").html();
$.each(str, function(key, value) {
var tblRow =
"<tr>"
//+"<td><a id="+key+" href='#dbID="+value.dbID+"&matID="+value.matterID+">"+value.matterInfoSortName+"</a></td>"
+"<td>"+value.matterInfoSortName+"</td>"
+"<td>"+value.matterInfoMatterNum+"</td>"
+"<td>"+value.matterInfoFileDesc+"</td>"
+"<td><input type='button' value="+value.matterInfoFileDesc+"></td>"
+"</tr>";
$(tblRow).appendTo("#matterTable tbody");
//alert(key + ': ' + value.matterInfoSortName);
});
$("button").live("click",function(){
var row = $(this).closest("tr");
var rowIndex = row.index();
alert(rowIndex);
});
}else{
$('#message').removeClass().addClass('error')
.text('There was an error.').show(200);
}
$('#searchForm').show(200);
if (data.error === true)
$('#searchForm').hide(200);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
$('#waiting').hide(200);
$('#message').removeClass().addClass('error')
.text('There was an error.').show(200);
$('#searchForm').show(200);
}
});
return false;
});
});
</script>
</center>
</body>
I have a table with dynamically changing rows items.
Among the rows there is a small button / link for each unit.
Eg
Data1 | LinkButton
Data2 | LinkButton
Data3 | LinkButton
Data4 | LinkButton
Data5 | LinkButton
Data6 | LinkButton
What i want is that when i click on the link button ,i need to know which row is selected?Can any one give me pointers on how that can be done?
You help will be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/main.css" type="text/css" media="screen, projection" rel="stylesheet" />
</head>
<body><center>
<div id="message" style="display: none;">
</div>
<div id="waiting" style="display: none;">
Please wait<br />
<img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
</div>
<form action="" id="searchForm">
<label for="search">Matter Search:</label> <input type="text" name="search" id="search" />
<input type="submit" id="submit" value="Submit" />
<a href="#">Link</a>
</form>
<div id="matterTableDiv" style="display: none;">
List of Matters
<table id="matterTable" border="1">
<thead>
<th>Matter Names</th>
<th>Matter Number</th>
<th>Description</th>
<th></th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="matterDetailTableDiv" style="display: none;">
Matter Detail Table
</div>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').focus();
$('#submit').click(function(){
$('#message').hide(200);
$("#matterTableDiv").hide(200);
$("#matterTable tbody").text("");
$('#waiting').show(200);
$('#searchForm').hide(200);
$.ajax({
type : 'POST',
url : 'post.php',
dataType : 'json',
data: {
search : $('#search').val()
},
success : function(data){
if(data.msg == "[]" ){
$('#waiting').hide(200);
$('#message').removeClass().addClass('error')
.text('There was an error.').show(200);
$('#searchForm').show(200);
}
$('#waiting').hide(200);
$('#matterTableDiv').removeClass().addClass((data.error === true) ? 'error' : 'success')
if(data.error == false){
var str = JSON.parse(data.msg);
$("#matterTableDiv").show(200);
//alert("List :" + str.length);
//alert("List :" + str.toString());
$("#matterTable").html();
$.each(str, function(key, value) {
var tblRow =
"<tr>"
//+"<td><a id="+key+" href='#dbID="+value.dbID+"&matID="+value.matterID+">"+value.matterInfoSortName+"</a></td>"
+"<td>"+value.matterInfoSortName+"</td>"
+"<td>"+value.matterInfoMatterNum+"</td>"
+"<td>"+value.matterInfoFileDesc+"</td>"
+"<td><input type='button' value="+value.matterInfoFileDesc+"></td>"
+"</tr>";
$(tblRow).appendTo("#matterTable tbody");
//alert(key + ': ' + value.matterInfoSortName);
});
$("button").live("click",function(){
var row = $(this).closest("tr");
var rowIndex = row.index();
alert(rowIndex);
});
}else{
$('#message').removeClass().addClass('error')
.text('There was an error.').show(200);
}
$('#searchForm').show(200);
if (data.error === true)
$('#searchForm').hide(200);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
$('#waiting').hide(200);
$('#message').removeClass().addClass('error')
.text('There was an error.').show(200);
$('#searchForm').show(200);
}
});
return false;
});
});
</script>
</center>
</body>
- 1 Can you post the HTML? There are a few ways to do this and it will make it easier to answer your question. – Wade73 Commented Oct 20, 2010 at 10:04
3 Answers
Reset to default 3I know that you ask for the row index, there are users that have given you the answer. But, usually we need the id of the row, because the id belongs to an id in the database. In this case, you could use the id of the cell or the button itself. Example:
<table>
<tr id="Data1"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
<tr id="Data2"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
<tr id="Data3"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
<tr id="Data4"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
</table>
$("input[type=button]").live("click", function() {
var row = $(this).closest("tr");
var rowId = row.attr("id");
alert(rowId);
});
You have this here:
http://www.jsfiddle/dactivo/YD3xy/
You can go from this (the clicked button) in the handler and use .closest() to get the <tr> of the button then grab anything you want from there, for example:
$(".someButton").live("click", function() {
var row = $(this).closest("tr");
var rowIndex = row.index();
});
For a full list of "moving-around" functions like this, check out the Tree Traversal section of the API.
I am guessing you are using...
$('.all_links').click(some_function)
So in that case, you can simply find it from inside some_function like so:
function some_function() {
$(this).parents('tr'); // this will give you the link's row.
}