I have one table populated from csv file. user will upload and can select a particular row. On click of submit button all the selected row data will be sent to a webservice.
I have done everything like populating the data and all using AngularJS(v1.6) and also i can get particular rowData onclick of a checkbox. But the problem is .checked is giving false if am not selecting all the rows. As a result if user checks and again uncheck a particular row then that value am not able to remove.
heres my code:
$scope.getRow = function(n,item){
var selectedRows = [];
console.log(item);
console.log(document.getElementById("checkboxValue").checked);
//will push all selected items to selectedRows
}
<table id="customers">
<tr>
<th></th>
<th ng-repeat="(key,data) in tableData[0]">{{key}}</th>
</tr>
<tr ng-repeat="item in tableData">
<td><input type="checkbox" id="checkboxValue" ng- click="getRow(this,item)" /> </td>
<td ng-repeat="(key,data) in item"> {{data}}</td>
</tr>
</table>
<button ng-click="executeQuery()">Execute</button>
table will look like
you can add ng-model to your checkboxes
<input type="checkbox" ng-model="item.checked"/>
and instead of updating(adding/removing items from) selectedRows everytime user clicks a checkbox, you can add checked values to selectedRows when user clicks on submit function by iterating through tableData.
var selectedRows = [];
angular.forEach($scope.tableData, function(value, key) {
if(value.checked){
selectedRows.push(value);
}
});
Related
I have a table of radio buttons as shown in the below picture and if the user checks one radio button then that selected radio button column should be disabled and the user can check only one radio button in a row and for this, I have given the same name to the radio buttons of each row so that user can select only one radio button for a row. now the problem is that I am unable to disable the radio button of the checked column. I have used checked and selected interchangeably. any help is very much appreciated. thank you.
table of radio buttons
<table>
<tr>
<th *ngFor="let heading of columnHeadings[selectedScenario]">
{{heading}}
</th>
</tr>
<tr *ngFor="let i of [0,1,2,3];">
<td *ngFor="let loop of columnHeadings[selectedScenario]">
<input type="radio" name="{{i}}"> Correct
<input type="radio" name="{{i}}"> Partial
</td>
</tr>
</table>
You have to track from which row you are selecting a radio button and then disable it.
HTML:
<table border="1px">
<tr>
<th *ngFor="let heading of columnHeadings[selectedScenario]">
{{heading}}
</th>
</tr>
<tr *ngFor="let i of iterables;">
<td *ngFor="let loop of columnHeadings[selectedScenario]">
<input [disabled]="disabledRows[i]" type="radio" name="{{i}}" (change)="disableRow(i)"> Correct
<input [disabled]="disabledRows[i]" type="radio" name="{{i}}" (change)="disableRow(i)"> Partial
</td>
</tr>
</table>
TypeScript:
selectedScenario: string = "scenario";
iterables = [0,1,2,3];
disabledRows = this.iterables.map(m => false);
columnHeadings = {
scenario: [
"Most Effective Response",
"Second Most Effective Response",
"Trird Most Effective Response",
"Least Effective Response"
]
};
disableRow(index: number) {
this.disabledRows[index] = true;
}
Working solution at Stackblitz.
I suppose that you don't want disable the columns, only need that an option is not selected in the same column, else early you get into a situation when you can not select any value
For this, give values to the radiobuttons and use an array to store the values
values=[]; //declare an empty arrays
<tr *ngFor="let i of [0,1,2,3]">
<td *ngFor="let loop of columnHeadings[selectedScenario];let j=index">
<input type="radio" name="{{i}}" [ngModel]="values[i]"
(ngModelChange)="change($event,i)" [value]="j" > Correct
<input type="radio" name="{{i}}" [ngModel]="values[i]"
(ngModelChange)="change($event,i)" [value]="10+j" > Partial
</td>
</tr>
See that values get the column selected (0,1,2,3) if you select correct and 10 + the column selected if you choose partial (10,11,12,13) (e.g. a value of 12 indicate that you choose the "Trird Most Effective Response partial" and a value of 1 indicate you choose "Second Most Effective Response correct")
The function "change", give value to this.values[index] and loop over "values" making null a value if is in the same column
change(value,index)
{
this.values[index]=value
this.values.forEach((x,i)=>{
if (i!=index && x%10==value%10)
this.values[i]=null
})
}
The stackblitz
Try to add checked disabled to your radios like this:
<input type="radio" checked disabled name="{{i}}">
I have a checkbox, one in the table, and one outside the table (check all). The checkbox outside the table serves to check all the checkboxes on each row in the table and take the value checkbox and enter it in the textbox. I have created a function to check all checkboxes in the table if the checkbox outside the table has been checked. The problem is that I can't retrieve all the checkbox values and enter it to the textbox. How to take all the value checkboxes if the checkbox outside the table has been checked?
below is my view
<div id="sectionTable">
<input type="checkbox" name="check_all" onclick="paymentCheckedAll(this);" /><span>Check All</span>
</div>
<table class="table">
<tr>
<th>selected</th>
<th>Name</th>
</tr>
#foreach (Learning.ViewModels.StudentViewModelitem in Model.StudentDetails)
{
<tr>
<td>
#Html.CheckBoxFor(modelitem => item.IsChecked, new {#class = "idRow", #id = "test", #value="123" })
<td>
<td>
#Html.DisplayFor(modelitem => item.Name)
</td>
</tr>
}
</table>
#Html.TextBoxFor(model => model.ListSelectedIdPayment)
<script>
$(document).ready(function () {
$(document).on(' change', 'input[name="check_all"]', function () {
$('.idRow').prop("checked", this.checked);
});
});
</script>
If you want values of all the checked checkboxes:
$('.idRow').each(function(){
if($(this).attr('checked')){
//set value here by $(this).attr('value')
}
});
I want to delete multiple rows on check box selection on right click menu option, in my controller am able to get index and delete the values from DOM, but on html page the values are not getting deleted as per the selection rather it is deleting the rows from last.
This is my controller.js
$scope.tableSelection = {};//used for getting checkbox selection
['Delete', function ($itemScope) {
for (var i = $rootScope.rows.length - 1; i >= 0; i--) {
if ($scope.tableSelection[i]) {
//delete row from data
$rootScope.rows.splice(i, 1);
//delete rowSelection property
delete $scope.tableSelection[i];
}
}
}];
here in controller the dom is changing correctly, means the values in $rootscope.rows is getting deleted as per the selection.
This is my html page.
<div id="table" context-menu="menuOptions" ng-controller="dictionaryElementsController">
<tbody>
<tr ng-repeat="row in rows track by $index" ng-class="{'success' : tableSelection[$index]}">
<td>
<input type="checkbox" ng-model="tableSelection[$index]">
</td>
<td ng-repeat="col in output_columns track by $index">
<enter data>
</td>
<td ng-repeat="col in input_columns track by $index">
<enter data>
</td>
</tr>
</tbody>
</div>
what should i do to delete the row as per selection and not rows from last on html page.
Can anyone please help me out in this
As you can see it is very simple using vanilla javascript.
var table = document.getElementById('sample');
var remove = document.getElementById('remove');
remove.addEventListener('click', function(e){
table.deleteRow(0);
});
<table id='sample'>
<tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr>
<tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr>
<tr><td>Cell 3,3</td><td>Cell 3,3</td><td>Cell 3,3</td></tr>
</table>
<button id='remove'>Remove</button>
You are trying to remove item inside iteration for(..) so after removing any item, array will be reset and next time wrong item will be removed. This will work only single item deletion Not for mulitple.
You need to create new array which contain not removed items you can do it using filter like
$scope.removeSelectedItems = function () {
$scope.rows = $scope.rows.filter(function (item, index) {
return !($scope.tableSelection[index] !== undefined && $scope.tableSelection[index]);
});
$scope.tableSelection = {};
}
Note - Don't mess $rootScope because it is application level global use respective controller's $scope
Check the Demo
The thing i was doing wrong was using track by.. If we don't use track by then angular itself keep track of objects and insert $$hashkey with every object. So, my logic worked after removing track by from ng-repeat in HTML page.
You can add any unique column to the tableselection.
NOte: If you do not have unique column add one. Could be timespan
<div id="table" context-menu="menuOptions" ng-controller="dictionaryElementsController">
<tbody>
<tr ng-repeat="row in rows track by $index" ng-class="{'success' : tableSelection[$index]}">
<td>
<input type="checkbox" ng-model="tableSelection[row.Id]">
</td>
<td ng-repeat="col in output_columns track by $index">
<enter data>
</td>
<td ng-repeat="col in input_columns track by $index">
<enter data>
</td>
</tr>
</tbody>
</div>
$scope.tableSelection = {};//used for getting checkbox selection
['Delete', function ($itemScope) {
for (var i = $rootScope.rows.length - 1; i >= 0; i--) {
if ($scope.tableSelection[$scope.row[i].UId]){
//delete row from data
$rootScope.rows.splice(i, 1);
//delete rowSelection property
delete $scope.tableSelection[i];
}
}
}];
I have a dynamically generated table that contains a checkbox for each row, some data, and a text input field.
I want to automatically check the checkbox for a selected row once text is entered in that row's textbox. Finally, when the 'Finish' button is pressed, I want any unselected rows to be hidden from printing. Final output will be the table containing only the selected rows (i.e. those with a check in the checkbox) and their values.
Here's the css print class to hide the unselected rows:
<style type="text/css" media="print">
.grid .hidden tr {
display:none;
}
</style>
Here's the HTML:
<table id="data" class="grid">
<thead>
<tr>
<th> </th>
<th>Part Number</th>
<th>Description</th>
<th>Qty to Order</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check"></td>
<td>1234</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>3454</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>6787</td>
<td>Description data goes here</td>
<td><input type="text" class="inputData"></td>
</tr>
</tbody>
</table>
<button id="clicker">Finish</button>
Finally, here's the jQuery. This is selecting all the checkboxes when text is entered in a text field, not just the one for that row (which I don't understand), and not assigning the "hidden" class to the rows without a checkbox - the class is not being assigned at all.
$(document).ready(function() {
//Check for input in text field
$('#data > tbody > tr').each(function() {
$(".inputData").change(function() {
if ($(this).val().length > 0) {
$(".check").prop("checked",true);
} else {
$("tr").addClass("hidden");
}
});
});
$("#clicker").click(function() {
window.print();
return false;
});
});
</script>
My logic in constructing this was to make sure we're only selecting rows in the table with an id of data. The first function will iterate over each row looking at the text field, and if the length of that field is greater than 0, check the box. Otherwise, assign the class of "hidden", which will prevent it from printing. Finally, simply assign a click event to the button.
Any help is greatly appreciated.
Here's a jsFiddle
This checks or unchecks the appropriate box based on whether the input has a value:
$(".inputData").on('input', function () {
var checkbox= $(this).closest('tr').find('[type="checkbox"]');
checkbox.prop('checked', $(this).val());
});
It doesn't need to be within an each() method.
This hides all rows in which the checkboxes are not checked:
$('[type="checkbox"]:not(:checked)').closest('tr').hide();
It makes sense to put that within the $("#clicker").click() function.
Updated Fiddle
I've got a jQuery/AJAX solution set up to update and delete items that are displayed in a table. The AJAX part works fine but once an item is deleted I need to be able to remove it from view and I can't figure out how to identify the selected item(s) based on their value after the submit button is clicked.
Here's my jQuery:
$('#button').click(function(event){
var order = $("#sortable tbody").sortable("serialize");
order += "&" + $("form[name=favorites]").serialize().replace(/%5B%5D/g, '[]');
order += "&crudtype=update_favorites";
$('#savemessage').html('<p>Saving changes...</p>');
$.post("/crud",order,function(theResponse){
$('#savemessage').html(theResponse);
});
});
});
My HTML is generated from PHP so the quantities and IDs are variable but the format is as follows:
<tr class="odd" id="field_37">
<td class="handle">Item #1 Name</td>
<td><input type="checkbox" name="fid[]" id="fid" value="37" class="box check-child"></td>
</tr>
<tr class="even" id="field_29">
<td class="handle">Item #2 Name</td>
<td><input type="checkbox" name="fid[]" id="fid" value="29" class="box check-child"></td>
</tr>
So effectively what (I think) I need is to add to my .click function something like "foreach checked fid, remove the corresponding row ID" if that makes any sense.
A basic selector to get a checked checkbox is
'input[type="checkbox"]:checked'
or
'input:checkbox:checked'
Now you can either use has() or loop through and use closest to get the trs
$('input[type="checkbox"]:checked').closest("tr").remove();
or
$('tr:has(input[type="checkbox"]:checked)').remove();
You can do it like this: http://jsfiddle.net/dSANw/
When user clicks on checked box add class to the parent tr
$(".box").click(function() {
if($(this).is(':checked')) {
$(this).parents('tr').addClass('checkedtd');
} else {
$(this).parents('tr').removeClass('checkedtd');
}
});
When clicked on delete, get all tables tr's classed 'checkedtd' and delete
$("#delt").click(function() {
alert($('.checkedtd').length);
$('.checkedtd').remove();
});