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.
Related
Using angularjs
I have a table which column one I am binding it to a an array.
Second column is a dropdown.
I want to have other 5-6 columns (text and dropdown) which I want to show/hide based on the value of second column dropdown.
I tried the below code:
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td >{{item.name}}</td>
<td >
<select name="utype" class="form-control input-medium" ng-model="utype">
<option value="">---Please select---</option>
<option ng-repeat="type in types" >{{type.text}}</option>
</select></td>
<td><span ng-hide="utype =='Type1' || utype!=undefined" >{{item.value}}</span></td>
<td><button class="btn btn-small" ng-click="edit(item)">Edit</button></td>
</tr>
</tbody>
</table>
ng-hide="utype =='Type1' || utype!=undefined"
But this only works the first time. After hiding it does not work.
Could anyone point what I need to do to make it work:
utype!=undefined is always true after you set ng-model="utype"> the first time.
Take out utype!=undefined and try it.
<td><span ng-hide="utype =='Type1' >{{item.value}}</span></td>
Also, imo, you should use === rather than '=='. see this SO answer for details.
e.g.. ng-hide="utype ==='Type1'
I have designed dynamic input matrix table. In that need to add select all option for each column. How to do that?
Here code:
<table [ngClass]="{'isDisplay': hasACLAccess}" class="responsive-table-input-matrix" id="matrixTable">
<thead>
<tr>
<th>Features/Roles</th>
<th *ngFor="let column of TableConfiguration.columns;">
{{column.title}}
<th>
</tr>
</thead>
<tbody *ngFor=" let feature of featureNameList">
<tr>
<td>{{feature.name}}</td>
<td *ngFor="let a of feature.roles">
<input name="access" [(ngModel)]="a.access" type="checkbox"
(change)="accessArrayList($event)">
</td>
</tr>
</tbody>
</table>
Thanks in advance.
In this, if checkbox of HR checked, then all checkboxes belongs to HR column should select, likewise for unchecked state also.
I need one help. I need the table value as per index after filtration using Angular.js. I am explaining my code below.
index.html:
<span class="input-group-addon ndrftextwidth" style="width:120px; text-align:left;">Name :</span>
<input class="form-control" placeholder="Name" name="name" type="text" ng-model="search.shipping_name">
<input type="button" class="btn btn-success" ng-click="addProductViewData();" id="addProfileData" value="Import"/>
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<thead>
<tr>
<th>Sl. No</th>
<th>Name</th>
<th> Product Name</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr dir-paginate="pro in orderDataList | filter:search |itemsPerPage:5 track by $index">
<td>{{$index+1}}</td>
<td>{{pro.shipping_name}}</td>
<td>{{pro.product_name}}</td>
</tr>
</tbody>
</table>
In the above code you can see I have one search field and one button above of the table. Here I need suppose user typed one name and filtered value display inside the table. When user will click on that button all filtered data will fetch in JSON format inside controller page. Please help me.
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 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);
});