I have this code:
<div class="main">
<form id="uploadFile" data-bind="attachForm: uploadFile">
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple = "true">
<input type="hidden" id="SESSION" name="SESSION" data-bind="value: session" />
</form>
<table class="dataTable" name="details">
<thead>
<tr>
<th data-bind="text: MDCode"></th>
<th data-bind="text: TargetAchieved"></th>
<th data-bind="text: Month"></th>
<th data-bind="text: Year"></th>
<th data-bind="text: MDName"></th>
<th data-bind="text: Document"></th>
</tr>
</thead>
<tbody data-bind="foreach: mainData">
<tr>
<td data-bind="text: MDCode"></td>
<td data-bind="text: targetAchieved"></td>
<td data-bind="text: month"></td>
<td data-bind="text: year"></td>
<td data-bind="text: MDName"></td>
<td> Open </td>
</tr>
</tbody>
</table>
</div>
I'm using knockoutjs to bind the values. The problem is that I need to count the foreah loop. The mainData is filled by the upload form(on the top). Every attached file is one row in the table. I can not count the mainData inside of my viewmodel, because when it's called themainData is empty.
I also tried:
rowCount = $('#details tr').length;
console.log(rowCount);
But it always returns 0, because when the viewModel is called there are no rows at all.
Please, help me with this issue. I'm pretty sure that the problem is inside of my logic, or I'm missing something really small, but I'm not able to spot it.
you need to change the selector because details is not the id of the table, but is is the name so you need to use the attribute selector
rowCount = $('table[name="details"] tr').length;
$(document).ready(function() {
rowCount = $('table[name="details"] tr').length;
alert(rowCount);
});
Related
Empty Text is not showing In table
I am using table
which is empty Now
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Privilege Name</th>
<th>PageUrl</th>
<th>Can Add</th>
<th>Can Edit</th>
<th>Can Delete</th>
<th>Can View</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in getAssignedPrivilegeslist" ng-show="getAssignedPrivilegeslist.length !=0 && getAssignedPrivilegeslist !='null'">
<td>{{$index+1}}</td>
<td>{{obj.PageName}}</td>
<td><a ng-href="{{'//'+obj.PageUrl }}">{{obj.PageUrl}}</a></td>
<td>
<input type="checkbox" name="Add" value="Add" ng-model="obj.CanCreate" />
</td>
<td>
<input type="checkbox" name="Edit" value="Edit" ng-model="obj.CanEdit" />
</td>
<td>
<input type="checkbox" name="Delete" value="Delete" ng-model="obj.CanDelete" />
</td>
<td>
<input type="checkbox" name="View" value="View" ng-model="obj.CanView" />
</td>
<td ng-show="getAssignedPrivilegeslist.length==0" id="nofoundop">Please Select Operator</td>
</tr>
</tbody>
</table>
Then I set a <td> if data length is 0 then show the given message but it is not showing.
Please help I will be very thankful to you all.
These three changes you have to made in your code :
Instead of ng-show="getAssignedPrivilegeslist.length !=0" you can use ng-show="getAssignedPrivilegeslist.length". As suggested by Harris Weinstein in his comment that if the list's length is any number besides 0, it'll evaluate as true, and if it's 0 or can't be accessed (because it's undefined), it'll evaluate as false.
Instead of using string literal getAssignedPrivilegeslist !='null' use getAssignedPrivilegeslist !=null.
Put your element having error message outside the <tr> as you already put the ng-show="getAssignedPrivilegeslist.length !=0" in the <tr> tag.
You can use like this outside your <tr> tag as suggested by sexta13:
<tr ng-show="getAssignedPrivilegeslist.length==0" >
<td id="nofoundop">
please select operator
</td>
</tr>
You have your logic not very well structured.
You have your
<td ng-show="getAssignedPrivilegeslist.length==0" id="nofoundop">
Please Select Operator
</td>
inside a ng-repeat that will only happen if getAssignedPrivilegeslist.length !=0 && getAssignedPrivilegeslist !='null'
You should have another tr outside the ng-repeat with something like this:
<tr ng-show="getAssignedPrivilegeslist.length==0" >
<td id="nofoundop">
please select operator
</td>
</tr>
I have a table I'm wanting to check the checkbox & add a class to a div when the user clicks on the table row, I can't get it to add the class.
can anyone show me where i'm going wrong.
HTML BELOW:
<div class="widgit">
<table id="QR_table">
<thead>
<tr class="QR_table-row">
<th class="qr_action">Checkbox</th>
<th class="qr_action">Action</th>
<th class="qr_from">FROM</th>
<th class="qr_to">TO</th>
<th class="qr_trans">Transport</th>
</tr>
</thead>
<tbody>
<tr class="QR-row">
<td class="checkbox">
<input class="modal-state" id="modal-1" type="checkbox" />
</td>
<td class="qr_action">PT</td>
<td class="qr_from">4</td>
<td class="qr_to">21</td>
<td class="qr_trans">WC</td>
</tr>
<tr class="QR-row">
<td class="checkbox">
<input class="modal-state" id="modal-1" type="checkbox" />
</td>
<td class="qr_action">PT</td>
<td class="qr_from">8</td>
<td class="qr_to">2</td>
<td class="qr_trans">T</td>
</tr>
</tbody>
JQUERY BLOW:
$(function() {
$(".QR-row").click(function() {
var $chk = $(this).find('input[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));
if($($chk).is(':checked')){
$(".widgit").addClass("modal-open");
} else {
$(".widgit").removeClass("modal-open");
}
});
});
JSFIDDLE
From my point of View everything works fine.
In your fiddle the only div that you have is around your table and it seems to be the one you try to give a class.
<div class="widgit">
<table id="QR_table">
And everything works fine. Fiddle
If you want it to do something else then you have to be a bit more specific about what you try to achive
I have a table that I want to give the user the ability to select. I added an button, value="Update", to the beginning of the row, and assigned an onclick value. My problem is that I want to send other items(in td>s on the same row) from the row to the function called by the button.
How do I get the information from the row the button is on? I would like to pass the "Name" and "Last Update Time" to the function the button calls. I tried using the following:
$("#Report input[name=btn_id]").closest('td').attr('text')
but it returns "undefined," which I am not surprised by, as I think this is due to it not knowing what row of the table to pull from.
Here is a view of the table:
Here is the code behind the table:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Any help would be appreciated.
Embrace the power of this.
Using:
onclick="UpdateRec(this)"
..in your function:
function UpdateRec(el) {
var targetRow = $(el).parents('tr')
...
}
Using this passes a reference to the clicked element. You can then use jQuery to select the parent table row. From there you can use .find() to select anything in that row.
Another way to do this would be to use HTML5 data- attributes on this button itself:
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" />
In the same function you can then use $(el).data('appName') to get the value directly without looking up values in other DOM elements.
//Add a click listener on all your buttons using event delegation
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]');
function onUpdateButtonClicked() {
var rowValues = $(this)
.parent() //select parent td
.nextAll() //select all next siblings of that parent td
.map(function () { //loop through the tds, collecting their text value
return $(this).text();
}).get(); //return the result as an array
//do what you want with rowValues
}
I would suggest you to use common class for all update buttons with common click event handler.
Here is the fiddle: http://jsfiddle.net/jwet6z6x/
HTML:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Javascript:
$(".updateBtn").click(function(){
var name = $(this).parent().parent().find('td').eq(1).html()
var time = $(this).parent().parent().find('td').eq(4).html()
alert (name);
alert (time);
})
I would do as follow : http://jsfiddle.net/Lk91cpup/2/
<table>
<tr id="row_1">
<td>
<input type="button" id="btn_row_1" class="btn" value="Update">
</td>
<td id="text_row_1">Test1</td>
<td>None</td>
<td>Desktop</td>
<td >2014-06-30 18:22:39</td>
</tr>
<tr id="row_2">
<td>
<input type="button" id="btn_row_2" class="btn" value="Update">
</td>
<td id="text_row_2">Test2</td>
<td>None</td>
<td>Server</td>
<td>2014-03-30 16:20:15</td>
</tr>
</table>
And Javascript
$(document).ready(function(){
$(".btn").click(function(){
var id = this.id.substring(this.id.lastIndexOf("_") + 1);
alert($("#text_row_" + id).text());
});
});
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
Since you have already written a javascript function call why not just include the things you need right?
This is simplier but not the best practise.
Sort of an odd question, but I'm having some trouble coming up with a good selector to do this. The jsfiddle is here: http://jsfiddle.net/NZf6r/1/
In short, I have a parent table which has a "select all" checkbox as a column in the thead. Every table row also has a checkbox. The intention is if they click the checkbox, I select (or deselect) all of the row checkboxes in the tbody. Simple, right?
However, there a rows in the table that function as child tables for each row. These child tables also have checkboxes and also have a need for the same "select all" scheme.
The tricky part is not getting the "select all" in the parent table to also select the children. My current event function looks like this (also on the jsfiddle):
$('th input').on('click', function(event) {
var isChecked = $(event.target).is(':checked');
$(event.target)
.parents('table')
.first()
.find('input[type="checkbox"]')
.each(function(i, checkbox) {
$(checkbox).prop('checked', isChecked);
});
});
I know I can use direct child selectors (>), but I'm not quite sure of the best way to incorporate that.
I also know I could add a class to the checkboxes for each table type (parent vs. child) and add that to the input selector, but I'm curious if there's a way I can avoid doing that. Some jQuery magic, if you will.
Here is the rough HTML of things (not the full table, obviously) in case you can't access the jsfiddle:
<table>
<thead>
<tr>
<th style="width:20px">
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Aaaaa</td>
</tr>
<tr>
<td colspan="2">
<div style="padding-left: 20px">
<table>
<thead>
<tr>
<th>
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Aaaaa</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Bbbbb</td>
</tr>
<tr>
<td colspan="2">
<div style="padding-left: 20px">
<table>
<thead>
<tr>
<th>
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Bbbbb</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Use this script instead:
$('th input').on('click', function(event){
var parenttable = $(this).parents('table:first');
var isChecked = $(event.target).is(':checked');
parenttable.find(">tbody>tr>td>div>input").prop('checked', isChecked);
});
try this demo
$('th input').on('click', function (event) {
var isChecked = $(event.target).is(':checked');
$(event.target)
.closest("table")
.find('> tbody > tr:not(:has(table)) > td input[type="checkbox"]')
.each(function () {
$(this).prop('checked', isChecked);
});
});
I have a table that looks something like so
<table id="grid" class="table table-bordered table-hover table-inline">
<thead>
<tr>
<th>Id</th>
<th>Dropdown List</th>
<th><input id="selectAll" type="checkbox" /></th>
</tr>
</thead>
<tbody data-bind="foreach: stuff
<tr>
<td data-bind="text: someId"></td>
<td>
<select class="input-medium" data-bind="options: someStuff, optionsText:'DisplayName', optionsValue:'StandardCode'"></select>
</td>
<td>
<input type="checkbox" data-bind="value: someId"/>
</td>
</tr>
</tbody>
</table>
and then im my javascript I am iterating through the selected rows like this
$('grid input[type="checkbox"]:checked').each(function () {
var someSelectedId= $(this).val();
var dropDownlistValue= ??
});
I am using knockout to bind my data to the table and the drop down.
When i am iterating through the rows how do i get the selected value in the drop down list for each row as i am iterating through them? For the life of me i cant seem to figure it out. Thanks!
Use:
var dropDownlistValue = $(this).parent().prev().find('select.input-medium').val();
Or...
$(this).closest("tr").find("select.input-medium").val();
A.V's method is probably faster, but going to the TR allows more flexibility, as it'll find the select no matter where in the row it is.