This is my angular table,here am showing row data when I click checkbox in a row.
my query is how can I uncheck sibling checkboxes when a checkbox is clicked?I tried to achieve this but I couldn't.
var app= angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.init = function(){
$scope.List=[
{
'encounterDate':'jan 11',
'visitId':'102359',
'emailId':'santhosh#gmail.com'
},
{
'encounterDate':'dec 2',
'visitId':'102360',
'emailId':'vijay#gmail.com'
}
];
}
$scope.showData = function(data){
alert("Encounter Date :" + data.encounterDate +" \n Visit ID:" + data.visitId +
"\n Patient name:"+ data.patientName +"\n Age:"+ data.age +"\n Referred by:"+ data.referredBy +"\n Email: "+ data.emailId)
}
})
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="init()">
<div class="container">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>S.no</th>
<th>Action</th>
<th>Encounter Date</th>
<th>Visit ID</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='data in List'>
<td>{{$index+1}}</td>
<td><input type='checkbox' class="checkBox"></td>
<td>{{data.encounterDate}}</td>
<td>{{data.visitId}}</td>
<td>{{data.emailId}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I tried this its not working..
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
Any suggesstion? Can Any one let me know that,What I did wrong?
First add ng-model to your checkboxes
<td><input type='checkbox' ng-model="data.checked" ng-change="checkSibling(data)" class="checkBox"></td>
and use ng-change to uncheck siblings when a checkbox is checked
$scope.checkSibling = function(rowData){
angular.forEach($scope.List, function(value, key) {
if(value.visitId != rowData.visitId)
value.checked = false;
});
}
Demo
Related
i have a table that i filter using a checkbox based on a column field bool "isAdmin" - when checkbox is checked, i see all orders, when unchecked,
i only see orders with isAdmin = true.
this is working as expected,
but i want isAdmin (first column) to be hidden, but i can't remove it since
i want to use it for the filtering.
View Html:
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
<div id="AllOrders">
<input type="checkbox" id="pos" value=true /> Show All Orders
</div>
<thead class="thead-dark">
<tr class="table-info">
<th>Is Admin</th>
<th>Order Id</th>
<th>Order Status</th>
<th>Product</th>
<th>US Date</th>
<th>Store</th>
<th>Quantity</th>
<th>Full Address</th>
<th>Tracking Number</th>
<th></th>
</thead>
#{string FullAddress = "";}
#foreach (Order order in Model.Order)
{
FullAddress = "";
<tr>
<td>#order.IsAdmin</td>
<td>#order.Id</td>
<td>#order.OrderStatus</td>
.
.
.
.
</table>
Javascript that control the checkbox in the section script:
<script>
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var isAdmin = data[0];
if ($('#pos').prop("checked") == true) {
return true;
} else if ($('#pos').prop("checked") == false && isAdmin) {
return true;
}
else { return false; }
}
);
$('input:checkbox').on('change', function () {
var table = $('#tblData').DataTable();
table.draw();
});
</script>
I know similar questions have been asked but no one helped me with my problem.
I am displaying a dynamic table with all result from a sql request and the user has to choose one row by checking a checkbox but ONLY one. The thing is I don't know how to do this with a dynamic table.
Could someone tell me what I did wrong or what could be improved
Here is my html and javascript :
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" border="1">
<thead>
<tr>
<th>Position</th>
<th>Quantity</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in msg.payload">
<td ng-repeat="item in row" >{{item}}</td>
<td ><input type="checkbox" class="radio" value="1" name="row[1][]" /></td>
</tr>
</tbody>
</table>
Just need to change type="checkbox" by type="radio"
I would like to get the values in each cell in table row which is selected using a checkbox.
Scenario: Whenever user clicks the show table button, my page is dynamically loaded with some data from tables, which has columns like checkbox, Item name, Item code, Quantity, Rejected and Accepted. Now I want to get the values of selected rows when the user clicks the button called "save".
<script type="text/javascript">
$(document).ready(function() {
$("#tablediv").hide();
$("#showTable").click(function(event){
$.post('PopulateTable',{grn : $('#grn').val()},function(responseJson) {
if(responseJson!=null){
$("#itemtable").find("tr:gt(0)").remove();
var table1 = $("#itemtable");
$.each(responseJson, function(key,value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).html('<input type="checkbox" />');
rowNew.children().eq(1).text(value['itemname']);
rowNew.children().eq(2).text(value['itemcode']);
rowNew.children().eq(3).text(value['supplier']);
rowNew.children().eq(4).text(value['receivedqty']);
rowNew.children().eq(5).html('<input type="text" class="tb2"/>');
rowNew.children().eq(6).html('<input type="text" class="tb2"/>');
rowNew.children().eq(7).html('<input type="text" class="tb2"/>');
rowNew.appendTo(table1);
});
}
});
$("#tablediv").show();
});
});
<br/>
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<td><input type="checkbox" /></td>
<th scope="col">Item name</th>
<th scope="col">Item code</th>
<th scope="col">Supplier</th>
<th scope="col">Received qty</th>
<th scope="col">Accepted qty</th>
<th scope="col">Rejected qty</th>
<th scope="col">Remarks</th>
</tr>
</table>
</div>
$(document).ready(function(){
// code to read selected table row cell data (values).
$("#itemtable").on('click','.btnSelect',function(){
// get the current row
alert("i am inside select");
// get the current row
var currentRow=$(this).closest("tr");
var col1=currentRow.find("td:eq(0)").text(); // get SI no from checkbox
var col2=currentRow.find("td:eq(1)").text(); // get item name
var col3=currentRow.find("td:eq(2)").text(); // get item code
var col4=currentRow.find("td:eq(3)").text(); // get supplier
var col5=currentRow.find("td:eq(4)").text(); // get received qty
var col6=currentRow.find("td:eq(5)").text(); // get accepted qty
var col7=currentRow.find("td:eq(6)").text(); // get rejected qty
var col8=currentRow.find("td:eq(7)").text(); // get remarks
var data=col1+"\n"+col2+"\n"+col3+"\n"+col4+"\n"+col5+"\n"+col6+"\n"+col7+"\n"+col8;
alert(data);
});
});
<!--btnSelect is class of checkbox -->
I come across below exaple to get all value of table cell of checked row.
$('.chk').change(function () {
if($(this).is(':checked'))
{
$(this).closest('tr').find('td').each(
function (i) {
console.log($(this).text());
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tablediv">
<table border="1" id="itemtable" align="center">
<tr>
<th>check</th>
<th scope="col">Item name</th>
<th scope="col">Item code</th>
<th scope="col">Supplier</th>
<th scope="col">Received qty</th>
<th scope="col">Accepted qty</th>
<th scope="col">Rejected qty</th>
<th scope="col">Remarks</th>
</tr>
<tr>
<td><input type="checkbox" class="chk" ></td>
<td>Pencil</td>
<td>101</td>
<td>Supplier</td>
<td>10</td>
<td>5</td>
<td>5</td>
<td>Remarks</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" ></td>
<td>Pen</td>
<td>102</td>
<td>Supplier</td>
<td>25</td>
<td>20</td>
<td>5</td>
<td>Remarks</td>
</tr>
</table>
</div>
First give "name" to your checkbox, such as :
<input type="checkbox" name="case[]" />
JS code:
var values = new Array();
$("#saveButton").click(function(){
$.each($("input[name='case[]']:checked"), function() {
var data = $(this).parents('tr:eq(0)');
values.push({ 'Item name':$(data).find('td:eq(1)').text(), 'Item code':$(data).find('td:eq(2)').text() , 'Supplier':$(data).find('td:eq(3)').text()});
});
console.log(JSON.stringify(values));
});
Please check out the EXAMPLE
I have a table which is populated like this
$(document).ready(function (e) {
var t = { Qty: [61.0, 0.0, 8.0], Name: ["2009 A", "2009 B", "2009 C "] }
$.each(t.Qty, function (i, ele) {
$("#content").append("<tr><td><input type='radio' /></td><td>"+parseFloat(t.Qty[i]).toFixed(1) + "</td><td>" + t.Name[i] + "</td></tr>");
})
})
and its html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"> </script>
<table>
<thead>
<tr>
<th>Select </th>
<th>Qty</th>
<th>Name</th>
</tr>
</thead>
<tbody id="content">
</tbody>
I have to show the table information i.e name and qty in a popup whichever radio button is clicked.I am new to jquery.Any help would be appreciated.
You could easy bind on change state of radio buttons in table with:
$('#content').on('change', 'input[type="radio"]', function(){ /*code*/ });
and inside of it check is this radio checked?
if ($(this).is(':checked')) { /* code */ }
To get text from table, you have to select parent tr of input radio that is clicked, and inside of that tr you got, you have to search tds, with jquery .find('td:eq(NUMBER_OF_TD)') .
TD elements starts from zero (0).
$(document).ready(function (e) {
var t = { Qty: [61.0, 0.0, 8.0], Name: ["2009 A", "2009 B", "2009 C "] }
$.each(t.Qty, function (i, ele) {
$("#content").append("<tr><td><input type='radio' /></td><td>"+parseFloat(t.Qty[i]).toFixed(1) + "</td><td>" + t.Name[i] + "</td></tr>");
})
$('#content').on('change', 'input[type="radio"]', function(){
if ($(this).is(':checked')) {
var table_Name = $(this).parents('tr').find('td:eq(2)').text();
var table_Quantity = $(this).parents('tr').find('td:eq(1)').text();
alert("Name: "+table_Name+" & Quantity: "+table_Quantity);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"> </script>
<table>
<thead>
<tr>
<th>Select </th>
<th>Qty</th>
<th>Name</th>
</tr>
</thead>
<tbody id="content">
</tbody>
Try this. It uses jquery ui to show popup window
your HTML code
<table>
<thead>
<tr>
<th>Select </th>
<th>Qty</th>
<th>Name</th>
</tr>
</thead>
<tbody id="content">
</tbody>
</table>
<div id='popup' style='display: none;'>
<table>
<tr>
<td>Qty</td><td><label id='lblQty'></label></td>
</tr>
<tr>
<td>Name</td><td><label id='lblName'></label></td>
</tr>
</table>
</div>
and javascript
$(document).ready(function(e) {
var t = {
Qty: [61.0, 0.0, 8.0],
Name: ["2009 A", "2009 B", "2009 C "]
}
$.each(t.Qty, function(i, ele) {
$("#content").append("<tr><td><input type='radio' name='my_radio' ind='"+i+"' /></td><td>" + parseFloat(t.Qty[i]).toFixed(1) + "</td><td>" + t.Name[i] + "</td></tr>");
});
$('#content [type=radio]').click(function open_popup(e){
$('#popup').dialog({
open: function(){
$(this).find('#lblQty').text(parseFloat(t.Qty[$(e.currentTarget).attr('ind')]).toFixed(1));
$(this).find('#lblName').text(t.Name[$(e.currentTarget).attr('ind')]);
}
});
});
});
This is the working fiddle https://jsfiddle.net/Lurofvzn/
Basically, I want the the user to click the table and edit the text.
This is the Js Fiddle I followed:
http://jsfiddle.net/ddd3nick/ExA3j/22/
Below you will be able see the code I have put together. I have followed a JS fiddle and thought of using this in my page.
When I double click the cell nothing happens, I am not sure why is not working.
Please help to find what's missing!
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script type="text/javascript">
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
$(this).find('input').dblclick(function(e){
e.stopPropagation();
});
});
});
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<table class="editableTable">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Shahid</td>
<td>shahid#ssiddique.info</td>
<td>012-234-2432</td>
</tr>
</tbody>
</table>
<a href='http://ssiddique.info'> ssiddique </a>
</body>
</html>
First include the jQuery library
Than put your script
You might want to take a look at contenteditable Elements
which would than look pretty much like this:
$(function() {
var $td = $("td");
$td.on({
"keypress" : function(e) {
if (e.which !== 13) { // On Return key - "save" cell
e.preventDefault();
$(this).prop("contenteditable", false);
}
},
"dblclick" : function() {
$td.not(this).prop("contenteditable", false);
$(this).prop("contenteditable", true);
}
});
});
td, th { padding:5px; border: 1px solid #ddd; }
td[contenteditable=true] { outline: 2px solid #0af; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<p><b>Double-click</b> on a table cell to edit</p>r
<table>
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>000</td>
<td>Roko</td>
<td>roko#example.com</td>
<td>021-321-4321</td>
</tr>
<tr>
<td>001</td>
<td>Shahid</td>
<td>shahid#example.com</td>
<td>012-123-1234</td>
</tr>
</tbody>
</table>