I've created a simple table using Bootstrap and PHP which looks like this:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
</tbody>
</table>
This is part of a form that will be submitted and I need to track which rows were selected Yes and which rows were selected No. I would also like to add a .success class to the table row when Yes is clicked (and remove a .danger class if previously present), and when No is clicked add a . danger class to the table row (and remove a . success class if previously present).
If the user clicks Yes I would like to track the id value for the Row in a variable/array somehow and the same for the No selections. If the user changes a selection it should also remove the value from the original variable/array - e.g. if they first clicked No and then they click Yes it should add the value to the 'Yes' variable/array list and remove it from the 'No" variable/array list.
I'm still learning HTML, Javascript and CSS as I'm going so not sure what the best approach here is and how to implement a system that tracks selections and makes those available as POST values to include in the form submission?
Try using this
var store={};
//store all values of succes fauilure in an object coresponding to the id
$("[id^=RFIT]").each(function(e,i){store[i.id]=$(i).hasClass('success')?'success':'danger'});
//on click update the closest tr class and store
$('button').click(function(){
if($(this).hasClass('btn-success')){
result='success';
}else{
result='danger';
}
$(this).closest('tr').attr('class',result);
store[ $(this).closest('tr').attr('id')]=result;
});
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<label><input name="row1" id="row1Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row1" id="row1N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<label><input name="row2" id="row2Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row2" id="row2N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<label><input name="row3" id="row3Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row3" id="row3N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
</tbody>
</table>
You can use radio button to get user response also you can provide id to those radio button to catch event in java script using that you can change classes of row at run time.
Hope it will help you, still if any doubt ask me I will provide java script code too.
I have used same name to radio buttons in one row as to read input in PHP and different id to handle different event in java script.
Related
hi guys i have a question, i need remove a td of table, the td has a id and i try with remove(), but doesnt work this is my code in js
$('.btnEliminarLicencia').off('click');
$('.btnEliminarLicencia').on('click', function () {
$(this).parent().parent().remove();
var rlim=$('.btnEliminarRemoto').parent().parent().remove('#idLicenciaClienteR');
alert (rlim);
});
and i have two tables, in the first with the btnEliminarLicencia click remove the tr of table and in the second table delete also the td what is the first td of table , this is the code, i need delete the first table and a specific td
first table
<table class="table table-bordered tabla_licencia">
<thead>
<tr>
<th>Sucursal</th>
<th>Codigo (ID cliente)</th>
<th>Licencia</th>
<th>Caducidad</th>
<th>Estado</th>
<th style="width: 15%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="318">13123</td>
<td id="id_Cliente">18865082</td>
<td>482947</td>
<td>2016-11-04</td>
<td>
<input type="checkbox" class="form-control" checked="" disabled="">
</td>
<td>
<button type="button" class="btn btn-info btnEditLicencia" style="float:right;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btnEliminarLicencia" style="float:left;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
second table
<table class="table table-bordered tabla_remoto">
<thead>
<tr>
<th>Licencia</th>
<th>Descripcion</th>
<th>Usuario</th>
<th>Clave</th>
<th style="width: 15%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td id="idLicenciaClienteR">18865082</td>
<td>Caja</td>
<td>883792</td>
<td>nim3</td>
<td>
<button type="button" class="btn btn-info btnEditRemoto" style="float:right;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btnEliminarRemoto" style="float:left;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
in this case delete <td id='idLicenciaClienteR'>189992887</td>
as might do it, thanks
This might help you,
$('.btnEliminarLicencia').on('click', function () {
$('td#idLicenciaClienteR').remove();
});
Since id is unique in a page, you can dirctly use the id, no need to find with .parents().
Try something like this:
$('table td#id_Cliente').remove();
you can also define the class by putting .yourClass behind table
I've created a simple table using Bootstrap and PHP which looks like this:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
</tbody>
</table>
I have a script that runs when you click the "Yes" button to select a row to add a class to the selected table row - this is working well - to highlight the selected row green. The user is only allowed to select one row before they submit the form so I now need to modify this so that when they select a table row it highlights the selected row in green but removes any table row classes for all other table rows in the table.
Here's my script at the moment:
$(document).ready(function() {
$('button.btn-success').click(function() {
var refreshItemID = $(this).closest('tr').attr('id');
console.log(refreshItemID);
// Create a reference to $(this) here:
$this = $(this);
$.post('updateStaffSelection.php', {
refreshItemID: refreshItemID,
selectionType: 'yes'
}, function(data) {
data = JSON.parse(data);
if (data.error) {
console.log(data);
console.log('something was wrong with the ajax request');
$this.closest('tr').addClass("warning");
//make alert visible
$("#alert_ajax_error").show();
return; // stop executing this function any further
} else {
console.log('update successful - success add class to table row');
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
//$(this).closest('tr').attr('class','success');
}
}).fail(function(xhr) {
console.log('ajax request failed');
// no data available in this context
$this.closest('tr').addClass("warning");
//make alert visible
$("#alert_ajax_error").show();
});
});
});
I'm hoping it's possible to extend this to also remove any classes for the non selected row so that only the selected row has the success class added but not sure where to start here.
Remove the relevant classes that you need once the button was clicked from all of the tr elements in the table, and add the relevant class only to the specific tr.
$(function() {
$('button.btn-success').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
// Add the class only to the specific TR element
$(this).parents('tr').addClass('success');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
</td>
</tr>
</tbody>
</table>
I have a table with two column "user type" and "user Name" User type having a drop down selection So that i can select predefined user type and place a name in User name. There is a Add button on each click i am adding one another row.
I am doing one validation here So that user can't selected repeated "User type".
for example from row 1 is i select "value 1" from drop down. then from row 2 i should not be able to select same value. Anyway this validation works fine.
but there is one scenario if I add a duplicate row, then remove it right away, I am still unable to save because the validation error is still there.
here my jsp-
<div ng-class="{'col-sm-9'}" class="col-md-10">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<th>user type</th>
<th>user Name</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="object in edituserConfig track by $index" ng-form="jobfileForm">
<td><select class="form-control" ng-model="object.key" required ng-change="reValidateJob()" name="jobFileKey" ng-init="object.form = jobfileForm">
<option style="display:none" value=""></option>
<option value="value1">value1t</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
<option value="value5">value5</option>
</select></td>
<td><input type="text" class="form-control" name="jobFileName" ng-model="object.value" required/></td>
<td >
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1)" ng-form="jobfileForm" title="Delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-primary btn-sm" ng-click="edituserConfig.push({'key':'','value':''})" title="Add Value">
<span class="glyphicon glyphicon-plus"></span> Add Value
</button>
</td>
</tr>
</tbody>
</table>
</div>
My controller-
$scope.reValidateJob = function(){
angular.forEach($scope.edituserConfig, function(fieldMapO) {
var count = 0;
angular.forEach($scope.edituserConfig, function(fieldMapI) {
if(fieldMapO.key == fieldMapI.key){
count ++;
}
});
if(count >1){
fieldMapO.form.jobFileKey.$setValidity("duplicate",false);
}else{
fieldMapO.form.jobFileKey.$setValidity("duplicate",true);
}
});
};
Please advise me on delete button do i need to vaidate all the row again? any good solution?
Well, I think following should work. If not, I'd request you to create a js-fiddle or plunker.
add reValidateJob to ng-click of the add button like below
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1); reValidateJob();" ng-form="jobfileForm" title="Delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
Hope this helps!
I have a table that I am trying to add an empty row to the end of. (Eventually I will add input boxes and allow saving)
<div ng-repeat="rule in model.rules">
<table id="" datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered" style="margin-bottom: 2%">
<caption>{{rule.CategoryName}}</caption>
<thead>
<tr>
<th>Order</th>
<th>Rule</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="subRule in rule.Rules">
<td>{{subRule.Sequence}}</td>
<td>{{subRule.Name}}</td>
<td><button type="button" ng-click="removeRule($subRule)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" ng-click="addRule(rule)">Add Rule</button>
</div>
Controller:
$scope.addRule = function (rule) {
rule.Rules.push({ key: rule.Rules.length });
console.log(rule.Rules);
};
Before the click:
After the click:
As you can see the empty TR is popped to the front of the array on the page but:
The array has the data in the right order, the screen just puts them in the front.
Why aren't the new tr's added to the end of the table?
I am trying to add an type upon clicking the button.
Here is my jquery script:
$(function(){
$("#add").click(function(){
$("#inputboxes").append("<tr class='light'><td colspan='3' class='header'>Subject Name</td><td colspan='3'><input type='text' name='subject_name' /></td></tr>");
})
});
Then my HTML markup:
<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table cellpadding="0" cellspacing="0" style="text-align:center;">
<thead>
<tr>
<th colspan="7">Add subject on the list of available subjects</th>
</tr>
</thead>
<tbody id="inputboxes">
<tr class="dark">
<td colspan="7">
<input type="button" id="add" value="Click to add a subject" />
</td>
</tr>
</tbody>
<tbody>
<tr class="dark">
<td colspan="7"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>
#on page top
if(isset($_GET['submit']) print_r($_GET); // the only entry of array is the [submit'] => "Submit"
I can successfully generate an box, however it seems that whenever I hit submit, the box doesn't seem to be passed. Also how can I generate an increment in the name="" of generated box.
For the record, I found the workaround for this, moved the form tag outside of the table. Thanks everyone.
For the submit button to work, you need to put your inputs in a form. You can add an increment in the name if you want to, but it is not necessary. If you submit inputs with the same name, they will be submitted as an array.
Adding increment:
$(function(){
var i = 1;
$("#add").click(function(){
$("#inputboxes").append("<tr class='light'><td colspan='3' class='header'>Subject Name</td><td colspan='3'><input type='text' name='subject_name" + (i++) + "' /></td></tr>");
})
});
Adding form:
<form action="url" method="POST">
<table>
<tbody id="inputboxes">
<tr class="dark">
<td colspan="7"><input type="button" id="add" value="Click to add a subject" /></td>
</tr>
</tbody>
<tbody>
<tr class="dark">
<td colspan="7"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>