I have table displayed with checkboxes in each row like this-
Html code : -
<table>
<tr>
<td><input type= "checkbox"></td>
<td>Name1</td>
<td>Role1</td>
</tr>
<tr>
<td><input type= "checkbox"></td>
<td>Name2</td>
<td>Role2</td>
</tr>
<tr>
<td><input type= "checkbox"></td>
<td>Name4</td>
<td>Role4</td>
</tr>
<tr>
<td><input type= "checkbox"></td>
<td>Name3</td>
<td>Role3</td>
</tr>
</table>
I also have a button 'Sort'. When I click on the button sort, all those rows which have checkboxes as checked should be displayed first and all other rows after them. The result would look something like this -
How can this be implemented?
Using jquery you can parse each <tr> and check if their child checkbox is check then add them to a new table as first or last child. then replace the old table with the new one.
$(document).ready(function(){
$('#sort').on('click', function(){
var newTable = $('<table class="table"></table>');
$('.table').find('tr').each(function($index, $value){
if($(this).find('input[type=checkbox]').is(':checked')){
newTable.prepend($(this));
} else {
newTable.append($(this));
}
});
$('.table').replaceWith(newTable);
});
});
this should work but i havn't tested it yet.
Hopes it helps !
Nic
You can use sort() and is(':checked') to sort rows and then empty table and append sorted content. DEMO
var sorted = $('table tr').sort(function(a, b) {
if($(b).find('td:first-child input').is(':checked')) {
return 1;
} else {
return -1;
}
})
$('button').click(function() {
$('table').empty().html(sorted);
})
please try this
$('input').each(function(e,i){
if(!i.checked){
var tr=$(i).closest('tr');
$(tr).parent().append($(tr).remove());
}
});
Related
I got a question regarding removing table rows within a table. I got the following HTML:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td> does not contain the html5badge class and delete the parent: <tr>.
To do this I created the following jQuery code:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr> that contained the text: disabled is been removed! Based on the fact that the <td> within this <tr> does not contained the class: html5badge.
How can I achieve this?
You can use filter() to retrieve the tr elements which do not contain td.html5badge and remove them:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
Updated fiddle
simply make it
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});
Name and id of checkboxes are appearing dynamically. And we are not sure of number of checkboxes. A map is iterated to generate checkboxes contained in a table. So, each table will have a checkbox with 2-3 options depending on map entries. Javascript should validate that at least one entry of checkbox in a table should be checked.
HashMap<ServerGroup, ArrayList<String>> serversMap = (HashMap<ServerGroup, ArrayList<String>>) session.getAttribute("userServersMap");
Iterator itr = serversMap.entrySet().iterator();
while (itr.hasNext()) {
Map.Entry<ServerGroup, ArrayList<String>> entry = (Map.Entry<ServerGroup, ArrayList<String>>)itr.next();
<table border='1' align="center">
<tr>
<th>Select Server</th>
<th>Servers</th>
</tr>
<%
for (String server : entry.getValue()) {
%>
<tr>
<td><input type="checkbox" name="<%= entry.getKey().getName().toString() %>" value="<%=server%>"></td>
<td><%=server%></td>
</tr>
<%
}
%>
</table>
Try this with JS:
function checkOneCheckbox(){
var checkboxes=document.getElementsByName("your_checkbox_name"); //all should be same
var is_checked=false;
for(var i=0;i<checkboxes.length;i++)
{
if(checkboxs[i].checked)
{
is_checked=true;
}
}
if(is_checked){
//at least one is checked;
}else {
//...
}
}
More easy with jQuery:
// onready method...binding
var is_checked = false;
$('input[type="checkbox"]').each(function() {
if ($(this).is(":checked")) {
is_checked = true;
}
});
The following solution should hopefully work in this case.
Let's assume that your JSP generated the following html page
(say two html tables, it can generate any number of tables though for your case):
<table border='1' align="center">
<tr>
<th>Select Server</th>
<th>Servers</th>
</tr>
<tr>
<td><input type="checkbox" name="serverX" value="TestServer1"></td>
<td>TestServer1</td>
</tr>
<tr>
<td><input type="checkbox" name="serverY" value="TestServer2"></td>
<td>TestServer2</td>
</tr>
</table>
<table border='1' align="center">
<tr>
<th>Select Server</th>
<th>Servers</th>
</tr>
<tr>
<td><input type="checkbox" name="serverM" value="TestServer3"></td>
<td>TestServer3</td>
</tr>
<tr>
<td><input type="checkbox" name="serverN" value="TestServer4"></td>
<td>TestServer4</td>
</tr>
<tr>
<td><input type="checkbox" name="serverO" value="TestServer5"></td>
<td>TestServer5</td>
</tr>
</table>
Then on form submit you can call a Validate function which will iterate through all the tables on your page and if it finds a table without any checked checkbox it will return false and simply focus on the first checkbox of the table.
The Validate function will be :
function Validate()
{
var table = document.getElementsByTagName('table'); // get all the tables on the page
for(var i=0; i<table.length;i++) //loop through each table
{
var flag = false;
for( var j=1; j<table[i].rows.length;j++) // start checking from 2nd row of the table
{
var currentRow = table[i].rows[j];
var cell = currentRow.cells[0];
var elem = cell.getElementsByTagName("input");
if (elem[0].type == "checkbox")
{
if(elem[0].checked)
{
flag=true;
break; // stop checking this table as one checked found
}
}
}
if(j==table[i].rows.length && flag == false)
{
alert("Please select at least one checkbox!");
table[i].rows[1].cells[0].getElementsByTagName("input")[0].focus();//focus on the first checkbox in the table
return false;
}
}
}
Hope it helps!
Working Demo:
http://jsfiddle.net/6cyf4skd/
I'm working with Asp .net MVC3 following is my table,
<table id="myIndiaTable">
<thead>
<tr>
<th>Select All<input type="checkbox" class="chkhead" onchange="Getchecked()"/></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>1</td>
<td>xxx</td>
</tr>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>2</td>
<td>yyytd>
</tr>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>3</td>
<td>zzz</td>
</tr>
</tbody>
</table>
<div class="btn">
<input type="button" name = "Submit" value ="Submit" onclick ="GetValues()"/>
</div>
When I click the submit button I have to get the count of selected rows count as an alert. How can I get this using jQuery?
USe :checked for getting the checked checkboxes,
$( ".chkdata:checked" ).length;
pure javascript
thi line ckbox = document.getElementsByClassName("chkdata"); will get all the element with class name chkdata return an array of element and then we loop through those element to check how many element are checked .if it is checked then we increment the counter otherwise continue to loop
ckbox = document.getElementsByClassName("chkdata");
count=0;
for(var i=0;i<ckbox.length;i++){
element = ckbox[i];
if(element.checked){
count++;
}
}
alert("Number : " + count);
You can get all the checked checkboxes with class chkdata inside the table myIndiaTable
function GetValues(){
alert($('#myIndiaTable .chkdata:checked').length)
}
to get only the checked checkboxs in the table use
$('#myIndiaTable').find("input[type='checkbox']:checked").length
hello guys? can you please help with this? i have this tables in HTML.what i want to achieve is that, when i click the row the checkbox will be checked and the row will be highlighted.and is it possible with the checkbox column hidden?
<table border="1" id="estTable">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Chris</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Cass</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Aldrin</td>
<td>16</td>
</tr>
</tbody>
</table>
<input type="button" value="Edit" id="editbtn"/>
<div id="out"></div>
and i have this javascript to get the values of the selected row.And i was hoping to print one row at a time.
$('#editbtn').click(function(){
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
This gets a little easier when you use classes to add more context to your source:
<tr>
<td class="select hidden">
<input type="checkbox">
</td>
<td class="name">Chris</td>
<td class="age">10</td>
</tr>
Then you can do something like this:
$(document).ready(function () {
'use strict';
$('#estTable tbody tr').click(function (e) {
//when the row is clicked...
var self = $(this), //cache this
checkbox = self.find('.select > input[type=checkbox]'), //get the checkbox
isChecked = checkbox.prop('checked'); //and the current state
if (!isChecked) {
//about to be checked so clear all other selections
$('#estTable .select > input[type=checkbox]').prop('checked', false).parents('tr').removeClass('selected');
}
checkbox.prop('checked', !isChecked).parents('tr').addClass('selected'); //toggle current state
});
$('#editbtn').click(function (e) {
var selectedRow = $('#estTable .select :checked'),
tr = selectedRow.parents('tr'), //get the parent row
name = tr.find('.name').text(), //get the name
age = parseInt(tr.find('.age').text(), 10), //get the age and convert to int
p = $('<p />'); //create a p element
$('#out').append(p.clone().text(name + ': ' + age));
});
});
Live demo: http://jsfiddle.net/Lf9rf/
if i understand the "print one row at a time" correctly, i think you need to empty your "out" selector before executing the new call
$('#editbtn').click(function(){
$('#out').empty();
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
jsBin demo
CSS:
.highlight{
background:gold;
}
jQuery:
$('#estTable tr:gt(0)').click(function( e ){
var isChecked = $(this).find(':checkbox').is(':checked');
if(e.target.tagName !== 'INPUT'){
$(this).find(':checkbox').prop('checked', !isChecked);
}
$(this).toggleClass('highlight');
});
I have a table. see my table structure
<table width="100%" border="1">
<tr>
<td width="2%"><h2># SL NO</h2></td>
<td width="70%"><h2>Name</h2></td>
<td width="15%"><h2>Edit</h2></td>
<td width="13%"><h2>Delete</h2></td>
</tr>
<tr id="id0">
<td >1</td>
<td>XXXXXXX</td>
<td><img src="../images/icon_edit.gif" alt="Edit" /></td>
<td width="13%"><img src="../images/delete_07.png" alt="Delete" onclick="fnDeleteState(0)" /></td>
</tr>
<tr id="id1">
<td>2</td>
<td>XXXXXXX</td>
<td><img src="../images/icon_edit.gif" alt="Edit" /></td>
<td%"><img src="../images/delete_07.png" alt="Delete" onclick="fnDeleteState(1)" /></td>
</tr>
...
....
..
When press on the delete button i need to hide that row I have used this to remove particular row from the table
$("#id" + i).remove();
Its working fine. But the serial number... i's display as wrong. I.e. when I delete second row the serial number with in the third row is still 3 I need to display this s 2 and so on...
I there is any way to do this in jquery
Thanks in advance
function fnDeleteState(i) {
$("#id" + i).remove();
$("tr").each(function (index) { // traverse through all the rows
if(index != 0) { // if the row is not the heading one
$(this).find("td:first").html(index + ""); // set the index number in the first 'td' of the row
}
});
}
If I understand correctly, you need to update the first cell of each row so they display the rank of the row.
You can achieve it by adding a class for each of your content row, for example "contentrow" (to distinguish them from the heading row) and then write a function like this:
function refreshRowIDs(){
$(".contentrow").each(function(index){
$(this).children("td:first").html(index);
});
}
You need to reorder the Serial no. after deletion . You can use something like this :
function reorder(){
var i = 1;
$('#tableid tr').each(function() {
$(this).find("td:first").text(i);
i++;
});
}