How to find the row Id using jQuery?
Guys I asked a similar question like this earlier since I was unable to solve my problem I decided to ask a detailed question.Please referrer to my image
As i mentioned on the image I need to identify the particular table row index value or the number of the index field to enable the particular capacity,unit price,qty fi开发者_运维知识库elds and to display the subtotal.I tried some javascript and jq table row detection codes and they do the job but they effect to the capacity selection field baldly since every time a click or a select occurs capacity field gets reset to blank.
I tried this 2 full days but still unable to make a solution :(
This is the complete code set - http://jsfiddle.net/Ceylo/AE2Mb/
Please help me to get through this.
Supposing you put this as a callback of $('td').click():
$(this).parent().find('td:first').text()
or
$(this).closest('tr').find('td:first').text()
Here is jsfiddle sample
There's probably more elegant ways to do it, but why not just add an id that contains the row index to each tr element? You're creating them dynamically, so just use a counter to assign the id as you create them.
You can just use jQuery on the click or change event to navigate to the first row relative to the textarea, for example.
So if your markup is this:
<tr>
<td> Row # </td>
...
<td><input type="text" /></td>
</tr>
You could use this (pseudocode)
$(input).click(function() {
var me = $(this),
index = parseInt(me.getParent().children()[0].innerHTML);
})
Notice how the navigation works, when a click event is caught on the textbox then "this" will reference the text box. So you can navigate to its parent, (the tr), then navigate to the tr's first child (the td with the row number), and get its innerHTML, an cast it to an int.
in the case you want to identify it on change of an element :
jQuery("#myselect").change(function(){
var tableBody = jQuery(this).closest("tbody"); // Find the parent table body tag
var thisrow = jQuery(this).closest("tr"); // Find the parent row tag
var rowid = tableBody.children().index(thisRow);
alert(rowid);
});
jsFiddle: http://jsfiddle.net/JE8kR/
UPDATE
Going with RobG's advice:
jQuery("#myselect").change(function(){
var thisrow = jQuery(this).closest("tr"); // Find the parent row tag
alert(thisrow.eq(0).rowIndex);
});
check this. hope that it can help:
http://jsfiddle.net/chukhanhvan/pSjHc/1/
As far as I can tell, the relevant part of your code is here:
> $(function() {
> $('td').change(function() {
> var row = $(this).parent().find('td:first').text();
> //alert(row);
Within the function, this should be a TD element, its parent TR will be its parentNode. To get the rowIndex you just need:
var rowIndex = this.parentNode.rowIndex;
Here is a working example - does most that you want it to do. For the brevity I omitted handling default select of the product etc - So if you select a "Select" option for product you will get an error. Ideally you would do this using some sort of template and render product options based on your data struct as well...
on jsFiddle http://jsfiddle.net/Michal/Nubqj/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<title>Table Rows</title>
<script>
$(document).ready( function() {
//you need some sort of data struct if price and capacity varies per product
inventory = [{
name:"Product 1",
capacities:[{
"cap":4,
"price": 39.95
},{
"cap":8,
"price": 49.95
},{
"cap":16,
"price": 59.95
}]
},{
name:"Product 2",
capacities:[{
"cap":32,
"price": 19.95
},{
"cap":64,
"price": 29.95
},{
"cap":128,
"price": 39.95
}]
}]
var parentEl; //element which will hold your row DOM reference
$(".prod").change( function() {
html = "";
productIndex =this.selectedIndex-1
//build the appropriate capacity dropdown
for (i = 0;i<inventory[productIndex].capacities.length;i++){
html += "<option value='"+inventory[productIndex].capacities[i].price+"'>"+inventory[productIndex].capacities[i].cap+"</option>";
}
//find the row to update
parentEl = $(this).closest("tr");
capacity = parentEl.find(".capacity")
//update capacity dropdown and append html
capacity.html(html)
//enable capacity dropdown
capacity.attr("disabled",false)
//i am assuming that initialy the price will be the price of the first element in the capacity list
price = inventory[productIndex].capacities[0].cap;
//update the price column
parentEl.find(".price").attr("disabled", false).val(price);
//do the total - in this case you might want to calculate the total based on qty - I will leave it up to you to implement
parentEl.find(".total").text(price);
})
//update the price based on capacity
$(".capacity").change(function(){
parentEl = $(this).closest("tr");
//which product are we looking at
productIndex = parentEl.find(".prod").selectedIndex;
capIndex = this.selectedIndex-1;
//you can find the price either from your data struct
//price = inventory[productIndex].capacities[capIndex].cap;
//..or a value of a select
price = $(this).val();
parentEl.find(".price").attr("disabled", false).val(price);
})
})
</script>
</head>
<body>
<table>
<tr>
<td>Items</td>
<td>Capacity</td>
<td>Price</td>
<td>Total</td>
</tr>
<tr>
<td>
<select class="prod">
<option value="">Select..</option>
<option value="">Product 1</option>
<option value="">Product 2</option>
</select>
</td>
<td>
<select class="capacity" disabled="">
</select>
</td>
<td>
<input type="text" disabled="" class="price">
</td>
<td>
<span class="total">-</span>
</td>
</tr>
<tr>
<td>
<select class="prod">
<option value="">Select..</option>
<option value="">Product 1</option>
<option value="">Product 2</option>
</select>
</td>
<td>
<select class="capacity" disabled="">
</select>
</td>
<td>
<input type="text" disabled="" class="price">
</td>
<td>
<span class="total">-</span>
</td>
</tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论