In my Java program I have a List<DemoTable>.
List<DemoTable> demotable = new ArrayList<DemoTable>();
DemoTable is a class with id,name,and details variables.
I display these details using Jquery..
<table>
<c:forEach items="${modalAttribute.demotable}" var="demo">
<tr class="M_row_bg M_read">
<td><input type="checkbox" id="isDelete"/></td>
<td><label for="name">${demo.name}</label></td>
<td><label for="totalExperience">${demo.details}</label></td>
</tr>
<c:forEach>
</table>
Data will be displayed correctly ... but when check box is clicked I want to get Table row id:
$("#isDelete").click(function(){
if (this.checked){
alert('checked');
alert(demo.id);
} else {
alert('unchecked');
}
} );
I expect this alert to give the DemoTable id, but this alert does not show. Also, this click only works for the first row of the table.
How can I get the DemoTable id when I click the check box?
What does my code need to work with each row of table click event, not just the first row?
you're using #isDelete multiple times in the table. This is illegal, and the reason your code only works on the first row. Use a class instead.
your table rows don't even have an ID. They do however have an implicit index.
you should give your table an ID
you can use "event delegation" and just register a single click handler on a common parent element (i.e. the table) which then uses event bubbling to figure out which actual element was clicked. This can be more efficient than registering the exact same event handler explicitly on every matching element.
Try this instead:
$('#myTable').on('click', '.isDelete', function(){
if (this.checked) {
var rowId = $(this).closest('tr').index(); // row within table (0 based)
}
});
Related
I have a table where if X has a value, display X, otherwise, add a link which when clicked will display a textbox where user can input the value. I dynamically assign IDs/classes to the link and textboxes but when I run the application, each click on any link only seems to trigger the first row. I put in alerts to show what row is being clicked and I always get the first row. Looking at the browser DOM explorer, I can see that each row has its own unique ID. How do I get each OnClick event to grab the correct corresponding ID?
C#/Razor code:
<td>
Unmapped
<input type ="submit" class="editAction hidden" value="#string.Format("tr{0}",i)" name="action:ChangeToEditSubAction" />
<input type="hidden" name="#Html.Raw("EntityMapping.EMREntityID")" value="#Html.Raw(Model.DisplayResults[i].EMREntityID)" />
<span class="#string.Format("tr{0}accountTxtBox",i) hidden">#Html.TextBoxFor(m => m.EntityMapping.AssignedHOAccountID)</span> </td>
Javascript Function
function UnmappedClick() {
//$(".accountTxtBox").removeClass("hidden");
//$(".unmapped").addClass("hidden");
//$("#btnSave").removeAttr('disabled');
//$(".editAction").click();
//$(".editAction").val(null);
alert($(".unmapped").attr('id'));
var txtBox = $(".editAction").val();
var actTextBox = "." + txtBox + "accountTxtBox";
$(actTextBox).removeClass("hidden");
alert(txtBox);
}
DOM Explorer Image
You can pass a parameter from your onclick event using the "this" keyword.
onclick="UnmappedClick(this.id)"
function UnmappedClick(id){
//now you have the specific ID
}
or if necessary pass the whole control over
onclick="UnmappedClick(this)"
you can try this
$(this).attr('id') // use this
instead of
$(".unmapped").attr('id')
This will give you the current elements id when you click
As you can see here, using $('.class') will return a list all the elements with that class. When you use $(".unmapped").attr('id') you'll always get the value of the first element in the list, that's why you always get the first row.
The same will happen with var txtBox = $(".editAction").val();. With $(actTextBox).removeClass("hidden"); you'll remove the class hidden from all the elements matched.
To get the id of an element you can use onclick="unmapped(this) or onclick="unmapped(this.id)" using the following code depending on the onclick attribute
function unmapped(element) {
var id = $(element).attr('id')
alert(id)
}
function unmapped(id) {
alert(id)
}
You can check this fiddle to see them in action.
I have a html table 'TemplateData' populated dynamically from a db table...so for example could end up like:
ID Name Age
1 John 23
2 Mick 27
3 Mark 29
When the user clicks an image on screen it will post back the corresponding ID value. From here I want to change the background colour of the associating row.
So for example '2' has been posted back in 'fid'. so I have tried...
function highlightRowInTable(fid) {
var dtable = $("#TemplateData");
dtable.addClass("highlightedRow");
}
However this highlightes the outer cells of the table. I only want to highlight the corresponding row.
Iv been messing around with parents and siblings but cant find any working examples on line...any ideas?
It looks like your code is selecting the entire table, and then applying a class to it, though it is hard to say for sure. If you have an event listener attached to your table, you should be able to get the child element that was clicked on and toggle its class.
document
.getElementById('table')
.addEventListener('click', function(event){
// now event refers to the part of the dom that was clicked on
console.log(event)
});
Though I'm not sure without looking at your code. if you already have listeners set up, you might need to give every row an id based on fid, so that your function could specify the id to add class to.
function highlightRowInTable(fid) {
$(fid).addClass("highlightedRow");
}
when you create your table you can add an attribute to your <tr> to help select it later when an image is clicked.
#foreach (var row in table)
{
<tr data-uid="#row[id]">
<td></td>
</tr>
}
function highlightRowInTable(fid) {
var rows = $('tr').filter('[data-uid="' + fid + '"]');
rows.addClass("highlightedRow");
}
I have a simple HTML page where I will be having few rows, each row specifies a record in database, I have some input fields on each to collect and a link at the end, when I click that I need to collect the input field values on the same row.
The HTML goes like this:
<tr>
<td>Name</td>
<td><input name="mode_sort"/></td>
<td><input name="mode_selected" type="checkbox"/></td>
<td>Add</td>
</tr>
So I will be writing my code to collect input fields on the row when I click the "Add" link, I'm not sure how to pass the current clicked selector and get the field values with that in add_this_mode() function.
Within the function you can use jQuery traverse methods to isolate the parent row and then to find elements within that row
function add_this_mode( elem){
/* get parent row */
var $row = $(elem).closest('tr');
/* use find() to get other elements in row */
alert( $row.find('[name=mode_sort]').val() );
}
I have HTML table and certain rows belong to a class and each of those rows have an id. I have attached an onclick handler to the class using jquery. When the any of the rows in that class is clicked, the click event is triggered. But the source of the event propagates to the element in the clicked row. How to get the id of the row that contains the td(event source) ?
HTML :
<table>
<tr class="onegroup" id="parent_1">
<td> Item 1 </td>
<td> Item 2 </td>
</tr>
</table>
Jquery:
$(".onegroup").click(function (event) {
alert(event.target.id); // currently displays undefined as neither of the <td> have an id.
//Want to display the id of the row ('parent_1')
});
With jQuery you will not need to go and get for the event.target, since the context (this) is set to the element that is clicked and that matches the selector.
To be clearer:
The context will be set to the first element that accurs in event-bubbling that fits to the specified selector. Because of this $(this).is('.onegroup') will return true always inside your handler-function, as its the selector you bound the click to.
$(".onegroup").click(function () {
alert($(this).attr("id"));
});
This problem is related to my previous question in this link. Now, what I'm trying to do is do the opposite thing. I have here a dynamic table (where you can add and delete rows) and whatever is the data that the user input in the latest use of table (trigger by a button) should be retrieve and be posted in the same table (if the same button is clicked).
Here's the code that I used to get the data from my dynamic table:
$('#tableSearchMainAccount1 tr').each(function(){
var td = '';
if ($(this).find("td:first").length > 0) { // used to skip table header (if there is)
$(this).find('option:selected').each(function(){
td = td + $(this).text()+ ',';
});
td = td + $(this).find('input').val();
filt[ctr]=td;
ctr += 1;
}
});
alert (filt); //alert output like name,equals,ann,age,equals,11
Now, what I want to do is that when I click the button again, this previous input data will be posted again in my dynamic table.
My table is something that looks like this:
<table> <tr><th>field</th><th>comparison</th><th>value</th></tr>
<tr>
<td>
<select style="width:5em;" class="field">
<option>name</option>
<option>age</option>
<option>sex</option>
</select>
</td>
<td>
<select style="width:5em;" class = "comp">
<option>equals</option>
<option>starts with</option>
<option>not equal to</option>
</select>
</td>
<td><input type="text" class = 'value'></td>
<td><img class="add" src="css/images/add.png" /></td> // this is used to add new row
</tr>
</table>
The last data that a user input in the table should be displays in the table when table shows again. How do I add the data to my dynamic table?
EDIT:
When the button is clicked, a dialog opens which contains my dynamic table and every time a user close the dialog, all the row from that table will be gone same as the data the user entered. I already create a variable that holds the latest inputted data in the table. So when the button click again, I want the table to generate or displays the last input data by the user. The output should be the same as the latest input data.
Assuming you had a button id add and you wanted to add a table row onto the end:
$('#add').on('click', function() {
var $lastTr = $('table tr:last');
$lastTr.clone().insertAfter($lastTr);
$('#add', $lastTr).remove();
});
Using .clone to help us clone the last row, and appending it at the end.
Fiddle: http://jsfiddle.net/garreh/w9fXJ/
And just to pre-empt you're next question, here's the addition of removing a row ;-)
$('.remove_row').on('click', function() {
$(this).closest('tr').remove();
});
Fiddle: http://jsfiddle.net/garreh/w9fXJ/1/
JQuery.prepend and JQuery.append will help you