I have got the following HTML table...
<table>
<thead>
<tr>
<th>Nr.</th>
<th>Name</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Laura</td>
<td><input type="hidden" value="1">Info</td>
</tr>
<tr>
<td>2</td>
<td>Sabrina</td>
<td><input type="hidden" value="2">Info</td>
</tr>
</tbody>
</table>
How can I get with jQuery the value of the hidden input field, when the link is clicked?
$(".info").click(function() {
// Here I need to find out the value...
});
Here's how you do it :
$(".info").click(function(e) {
//just in case, will be useful if your href is anything other than #
e.preventDefault();
alert($(this).prev('input[type="hidden"]').val());
});
prev method will search for the previous element, which is where your input[hidden] is.
And its href, not hre, in the <a/> tags.
You can also use attributes <a href="#" data-hidden="1" class="info"> don't need use hidden fields
$(".info").click(function(e) {
e.preventDefault();
alert($(this).data('hidden')); // or $(this).attr('data-hidden');
});
Related
This is a table of one of my jsp page. I want to take the selected value of the column empId for a javascript method.
<table class="table table-bordered">
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Casual Leave Balance</th>
<th>Annual Leave Balance</th>
<th>Sick Leave Balance</th>
</tr>
</thead>
<tbody>
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td><dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev></td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
</tbody>
</table>
my javascript code segment
function selectempId(emp){
alert(emp);
}
But It (onclick) doesn't work. There are only methods to get selected values of dynamic dropdowns. Please tell me how to do this.
Thank you.
<dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev>
You don't need ()
You can pass value to javascript. But I don't know the dev tag in html. I think it is div.
<td><div class="correct" name="empId" onclick="selectempId(${leavebalances.empId})"> ${leavebalances.empId}</div></td>
Or you can pass to td's onclick action.
<td onclick="selectempId(${leavebalances.empId})">${leavebalances.empId}</td>
Here, my problem was being unable to pass td's values to javascript function, because there were no unique id's assigned for required td tags (dynamic table). So I gave dynamic ids.
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td id ="${leavebalances.empId}" class="correct" name="empId" onclick="selectEmpId(this.id)">${leavebalances.empId}</td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
/////////////////////javascript function///////////////////////////////
function selectEmpId(val) {
alert(val);
}
I need to show/hide tr tag of a table as per the scope value in the controller. I have written the code as shown below but class="ng-hide" gets appended everytime with tr tag automatically though I have declared my ng-show with correct syntax.
<div ng-show="IsParentExist">
<table>
<thead>...</thead>
<tbody>
<tr ng-show="noValueExist">
<span>There are no records to show here..</span>
</tr>
<tr ng-repeat....>
<td> </td>
</tr>
</tbody>
</table>
</div>
Here is a problem when it gets rendered in DOM as below
<div ng-show="IsParentExist">
<span>There are no records to show here..</span>
<table>
<thead>...</thead>
<tbody>
<tr class="ng-hide" ng-show="noValueExist">
</tr>
<tr ng-repeat....>
<td> </td>
</tr>
</tbody>
</table>
</div>
I have assigned the scope variable in controller as below
$scope.noValueExist = true;
Until you set the value of noValueExist as true in controller, angular sets the class as ng-hide by default.Add this line in controller.
$scope.noValueExist = true;
Try replacing ng-show="noValueExist" by ng-hide="!noValueExist"
<tbody>
<tr ng-hide="!noValueExist">
<td>There are no records to show here.</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
In your controller, initialize your value.
$scope.noValueExist = false;
And when you need to show your <tr> element set this value to true.
$scope.noValueExist = true;
I hope this will help you.
As user #cst1992 mentioned the issue was with span was not wrapped in .
The span is getting misplaced because it is not supported inside 'tr' tag.
You need to use 'td' tag to show content inside table.
After replacing 'span' with 'td' tag,it gets rendered in DOM as below.
<div ng-show="IsParentExist" class="ng-hide">
<table>
<thead>
<tr><th>a</th>
<th>b</th>
</tr></thead>
<tbody>
<tr ng-show="noValueExist" class="ng-hide">
<td>There are no records to show here.</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
I have a table with 4 columns . 4th column is a button (not shown in below code). When I click on the button in a row, I want to get row elements.
I have done it using closest selector. Is there any way to find table row element "Without using closest". This is the requirement for some reason.
Please assume there is a button at end of each row
<table id="food">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr class='details'>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>2</td>
<td>Mango</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>3</td>
<td>Grape</td>
<td>Fruit</td>
</tr>
</tbody>
</table>
Here is the existing code, I need to replace closest. It will be awesome if I can use class names like $(this).somethin('.details');
$('#button1').click(function(){
var row = $(this).closest('tr');
//Do some stuff
})
Thanks
Use parents() and pass a class selector like
$('#button1').click(function(){
var row = $(this).parents('.details');
//Do some stuff
})
Note, you could also use closest in this case and pass the class selector
var row = $(this).closest('.details');
I have a litte problem with the PicNet table Filter. Here is the demo.
Here is my JS:
$(document).ready(function() {
// Initialise Plugin
var options = {
additionalFilterTriggers: [$('#quickfind')]
};
$('#dataTable').tableFilter(options);
});
Here is the HTML:
<body>
Quick Find: <input type="text" id="quickfind"/>
<table id='dataTable'>
<thead>
<tr>
<th>File</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">10.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">20.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">22.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
</tbody>
</table>
..
Is it possible to search with #quickfind in only one (first) column?
when I search in #quickfind for "22" I got 3 results because the right column has a "22" in the date and time.
I disabled in the CSS the .filter class with display:none; because I only want one searchfield. I copied the genererated javascript code and replaced it with the #quickfind.
<input type="text" id="filter_0" class="filter" >
filter_0 is for the first row. filter_1 is for the second row. And so on. But the code works only in the table! and not above.
Any ideas to solve the problem?
You can disable the search for column(s), just put filter='false' attribute in the header th tag(s).
<th filter='false'>Last modified</th>
I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>
try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});
updated demo
Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.