So, I have a table that has multiple rows. I'm trying to select each row with a button; also, in the table heading, there's a select all button that will select ALL buttons in all rows. Here is the html:
<table class="table" ng-controller="myController">
<thead>
<tr class="info">
<th>Company Name</th>
<th>Address</th>
<th>
<input type="button" class="btn btn-default" id="select-all" data-toggle="button" value="Show All" aria-pressed="false">
</th>
</tr>
</thead>
<tbody ng-repeat="company in fieldData">
<tr>
<td>{{ company.name }}</td>
<td>{{ company.address }}</td>
<td style="text-align: center">
<input type="button" class="btn btn-default" id="select-one" data-toggle="button" value="Show" aria-pressed="false">
</td>
</tr>
</tbody>
</table>
How can I make a function using jQuery to change aria-pressed values of ALL rows? Any ideas?
are you using Angular js.
I have write a simple code, have a look
<div>
<ul ng-controller="checkboxController">
<li>Check All
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</li>
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
</ul>
angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
Angular code here
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectedAll;
});
};
});
set an ng-model on the "Select All" checkbox then use the ng-checked directive to select/deselect all.
<table class="table" ng-controller="myController">
<thead>
<tr class="info">
<th>Company Name</th>
<th>Address</th>
<th>
<input type="button" ng-model="selectAll" class="btn btn-default" id="select-all" data-toggle="button" value="Show All" aria-pressed="false">
</th>
</tr>
</thead>
<tbody ng-repeat="company in fieldData">
<tr>
<td>{{ company.name }}</td>
<td>{{ company.address }}</td>
<td style="text-align: center">
<input type="button" class="btn btn-default" id="select-one" data-toggle="button" value="Show" aria-pressed="false" ng-checked="selectAll">
</td>
</tr>
</tbody>
</table>
Related
So I have this Data Table [Fig. 1] inside a form which submits the table's data, the problem is it doesn't submit all the checked rows in all pages, it only submits what's shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box's value with data-checkid's value.
The scenario is all the checked rows that'll be submitted will run a query like this
UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**
[Fig.1]
<form method="POST" id="manage-layers" name="manage-layers">
<button class="btn btn-warning" type="submit" id="save_layers">
<i class="fa fa-save"></i>
<strong>Save</strong>
</button>
<table id="subgrp_layertbl" class="table table-responsive text-dark">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Layer Name</th>
<th scope="col">Associate Layer</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%">1</td>
<td width="50%">Value 1</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="12,27" data-checkid="40" >
</div>
</td>
</tr>
<tr>
<td width="1%">3</td>
<td width="50%">Value 3</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="14" data-checkid="3" >
</div>
</td>
</tr>
<tr>
<td width="1%">8</td>
<td width="50%">Value 8</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="16" data-checkid="8" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
[Fig.2]
<script type="text/javascript">
$(document).ready(function (){
var table = $('#subgrp_layertbl').DataTable();
$('#manage-layers').on('submit', function(e){
e.preventDefault();
var data = table.$('input,select,textarea').serializeArray();
console.log(data);
});
});
</script>
I really think this should answer your problem
https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.
I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here are the 2 scripts that I would like to run when the Select button is clicked in either table (first script for the top table and 2nd script for the 2nd table):
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
var itemID = $(this).closest('tr').attr('id');
// Create a reference to $(this) here:
$this = $(this);
$.post('updateAccessories.php', {
itemID: itemID
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(errorAlert);
$("#alert_ajax_error").show();
return; // stop executing this function any further
} else {
if ($this.closest('tr').hasClass("success")) {
$this.closest('tr').removeClass("success");
} else {
$this.closest('tr').addClass("success");
}
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(ajaxError);
$("#alert_ajax_error").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
At the moment clicking either button runs both scripts which I can understand as they both meet the criteria for:
$('button.btn-success:not([type="submit"])').click(function() {
but I'm not experienced enough to know how to make the necessary changes to have each button run a different script here?
A very basic way to differentiate between buttons would be to add an attribute called "id" to them.
<button id="button1" type="button" class="btn btn-success btn-sm">Select</button>
<button id="button2" type="button" class="btn btn-success btn-sm">Select</button>
Now you can reference each like this:
$('#button1').click(function() { ...
$('#button2').click(function() { ...
If you can change the markup then add a class from main and another for accessories in the button and do $('button.main') and $('button.accessories') instead of $('button.btn-success:not([type="submit"])')
If not then you need to be able to discern one from another.
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function(e) {
var t = $(e.target).parent().parent().parent().parent().parent().prev()[0].innerHTML;
if(t.indexOf("Main") !== -1) {
// Has MAIN - put your main code in here
console.log("main stuff");
} else if (t.indexOf("Accessories") !== -1) {
// It's Accessories - put your accessories code in here
console.log("accessories stuff");
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I'm starting coding. I'm using Symfony 3.3
I would like to hide ( and show ) a or some specifics rows on a table with a checkbox.
I tried with javascript and jquery. I would like that the hidden rows stay hide.
I don't know how to do this. Here is my twig
{% block body %}
<div class="container">
<h3>List of products</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Size</th>
<th>Charges</th>
<th>Price</th>
<th>Actions</th>
<th>Desactivation</th>
</tr>
</thead>
<tbody>
{% for catalogue in catalogues %}
<tr class="table">
<td>{{ catalogue.product}} </td>
<td>{{ catalogue.description }} </td>
<td>{{ catalogue.size}} </td>
<td>{{ catalogue.charge }} </td>
<td>{{ catalogue.price }}</td>
<td>
<span class="glyphicon glyphicon-edit"></span>
<span class="glyphicon glyphicon-remove"></span>
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
{% else %}
{% endfor %}
</tbody>
</table>
{% endblock %}
$('.hideshow').on('click',function(){
let cls = $(this).attr("data-id")
if ( $('#'+cls).css('display') == 'none' ){
$('.table tbody').find('#'+cls).show();
}else{
$('.table tbody').find('#'+cls).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>List of products</h3>
<div class="buttons">
<button type="button" data-id="tr1" class="hideshow">Hide/Show Row 1</button>
<button type="button" data-id="tr2" class="hideshow">Hide/Show Row 2</button>
<button type="button" data-id="tr3" class="hideshow">Hide/Show Row 3</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Size</th>
<th>Charges</th>
<th>Price</th>
<th>Actions</th>
<th>Desactivation</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>Product </td>
<td>Description </td>
<td>Size </td>
<td>Charges </td>
<td>Price</td>
<td>
Edit
Remove
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
<tr id="tr2">
<td>Product </td>
<td>Description </td>
<td>Size </td>
<td>Charges </td>
<td>Price</td>
<td>
Edit
Remove
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
<tr id="tr3">
<td>Product </td>
<td>Description </td>
<td>Size </td>
<td>Charges </td>
<td>Price</td>
<td>
Edit
Remove
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
</tbody>
</table>
I'm creating a web app in mvc with angularjs in which i want to filter the data inside my table but I'm getting error while I debug my code.
This is what the error is
Error: $rootScope:infdig Infinite $digest Loop 10 $digest() iterations
reached. Aborting! Watchers fired in the last 5 iterations: []
I tried something like this
<tr ng-repeat="d in dataintbl| filter:search">
and I added another tr in my thead
<td>
<input type="text" ng-model="search.taskstartdate" placeholder="" class="erp-input" />
</td>
this is how my table looks
<table class="table table-bordered">
<thead>
<tr class="bg-primary">
<th>Task Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Priority</th>
<th>Action</th>
<th ng-hide="true">autoid</th>
</tr>
<tr>
<td>
<input type="text" ng-model="search.taskstartdate" placeholder="" class="erp-input"/>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in dataintbl" ng-class="{'changecolor':(d.IsCompleted=='True')}">
<td>{{d.taskname}}
</td>
<td>{{d.taskstartdate}}</td>
<td>{{d.taskenddate}}</td>
<td ng-class="{'greenrow': (d.taskpriority == 'Low'), 'yellowrow': (d.taskpriority == 'Medium'), 'redrow': (d.taskpriority == 'High')}">
{{d.taskpriority}}
</td>
<td>
<span ng-class="{'hidespan':(d.IsCompleted=='False')}">Completed</span>
<div ng-class="{'hidebutton':(d.IsCompleted=='True')}">
<a href="#" ng-click="updatetask(d)" data-toggle="modal" title="EDIT TASK" data-target="#myModalb"
class="btn btn-warning glyphicon glyphicon-edit"></a>
<a href="#" ng-click="deleteuser(d)" title="DELETE TASK"
class="btn btn-danger glyphicon glyphicon-trash"></a>
<a href="#" ng-click="taskcompleted(d)" title="COMPLETE TASK"
class="btn btn-success glyphicon glyphicon-ok"></a>
</div>
</td>
</tr>
</tbody>
</table>
I just want to understand, how can i give filters to the users?
you need to change the following line
<tr ng-repeat="d in dataintbl" ng-class="{'changecolor':(d.IsCompleted=='True')}">
to something like this
<tr ng-repeat="d in dataintbl | filter:search.taskstartdate" ng-class="{'changecolor':(d.IsCompleted=='True')}">
and everything is looking fine
i m just learn vue.js
and i want to display a table data.my opinion is when display mode the table just show. and when i click edit button of the line of the table, i want this line convert to model.
this is my code:
```
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<template v-for="data in apidata" track-by="$index">
<tr>
<td>{{$index + 1}}</td>
<td>
<div v-show="data.editmode"><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</template>
</tbody>
</table>
```
my data is like this
[{name:'test', pass:'1'}, {name:'test2', pass:'2'}]
i bind a edit()function to listen the click event.
edit: function(data){
alert(data.editmode);
data.editmode = true;
}
i think when i click .becuase the data.editmode will change to true.
this line will convert to input mode . but its useless.
i have tried v-if=data.editmode , v-if="data.editmode" ,v-show="data.editmode" , still got nothing
i dnt know why?
You just need to include editmode in your data declaration so that it is a reactive data item.
new Vue({
el: 'body',
data: {
apidata: [{
name: 'test',
pass: '1',
editmode: false
}, {
name: 'test2',
pass: '2',
editmode: false
}]
},
methods: {
edit: function(data) {
data.editmode = !data.editmode;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr v-for="data in apidata">
<td>{{$index + 1}}</td>
<td>
<div v-if="data.editmode">
<input v-model="data.name">
</div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode>
<input v-model="data.pass">
</div>
<div v-else>{{data.pass}}</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</tbody>
</table>