I have a table where each row contains document name and there's a checkbox at the start of each row. Some checkboxes are disabled. I want to add text-decoration:line-through to that row so that user can easily identify that, that row can't be selected because checkbox is disabled. How can this be done using JavaScript or jQuery?
In below example the row with Doc name 2 should be line-through.
<tr>
<td>
<input type="checkbox" name="doclist" id="someId" value="someId" onchange="updateList('someId')">Doc name 1
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="doclist" id="AnotherId" value="AnotherId" onchange="updateList('AnotherId')" disabled>Doc name 2
</td>
</tr>
I tried the below.
$('input[type="checkbox"]').filter(function() {
var disabledRow = this.disabled;
disabledRow.addClass("lineThrough");
});
CSS
.lineThrough{
text-decoration:line-through;
}
DEMO
$('table tr td input[type="checkbox"]').each(function(){
if($(this).prop('disabled')){
$(this).parents('tr').css('text-decoration','line-through');
}
});
if you want to work with class
$('table tr td input[type="checkbox"]').each(function () {
if ($(this).prop('disabled')) {
$(this).parents('tr').addClass('lineThrough');
}
});
As Suggested by UweB
.closest('tr') is faster than .parents('tr')
$('table tr td input[type="checkbox"]').each(function () {
if ($(this).prop('disabled')) {
$(this).closest('tr').addClass('lineThrough');
}
});
$('input[type="checkbox"]:disabled').parent().addClass('lineThrough');
Related
On the view of my ASP.NET MVC 5 Application, I have two tables, Each row in the tables has a checkbox which is dynamically generated.
I am trying to add Check All / Uncheck All functionality for both the tables.
Following are two checkboxes:
<input id="ALL" class="CheckAll" type="checkbox" value="All" /><b>Select / Unselect All</b>
<input id="ALLt2" class="CheckAllt2" type="checkbox" value="All" /><b>Select / Unselect All</b>
Following is the relevant HTML Code:
<table class="table" id="hostsTable">
<thead>
<tr>
<th>FQ</th>
<th>Name</th>
<th>Select?</th>
</tr>
</thead>
<tr>
<td>
VISIBLE FQ VALUE
</td>
<td>
VISIBLE NAME
</td>
<td>
<input Style="vertical-align:3px}" data-val="true" data-val-required="The Checked field is required." id="Hosts_0__Checked" name="Hosts[0].Checked" type="checkbox" value="true" /><input name="Hosts[0].Checked" type="hidden" value="false" />
</td>
</tr>
</table>
The Structure of both the table is same and ID of second one is countersTable
Following is my jQuery:
$('.CheckAll').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#hostsTable tr input:checkbox:not(".CheckAll")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAll').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAll)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAll').prop('checked', true);
}
});
$('.CheckAllt2').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#countersTable tr input:checkbox:not(".CheckAllt2")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAllt2)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', true);
}
});
When I click on either of the Select / Unselect All checkbox, the checkboxes from both the tables get Checked / Unchecked.
How Can I restrict this to respective tables?
Thanks In Advance
I assume that you select the wrong element when calling $.parent().parent(). If you grab an element that both tables are children of, all input[type="checkbox"] will be selected, obviously.
Since you have different classes for both checkboxes, try to instead of selecting by $.parent().parent(), just using the # id selector for the relevant table.
I.e. change this:
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
to
$("#hostsTable").find('input[type=checkbox]').prop('checked', this.checked);
for the first table, and with #counterTable for the second one.
I have a table and it contains data with checkboxes in each row. When any of the checkboxes is checked, I add theSelected class to the corresponding tr element.
$('#InventoryTable tbody').on('click', 'input[type="checkbox"]', function (e) { /** logic */ });
But I am facing the issue below, when getting the selected tr element on button click.
This is the code I am using to get the seletced tr values:
function myFunc() {
debugger;
var table = $('#InventoryTable').DataTable();
var adjustmentdetails = new Array();
$("#InventoryTable tr.selected").each(function (ix, element) {
// Do your processing.
debugger;
});
}
However, I am not able to get other page(Pagination) selected values using above code.
just convert this code into function
function clickcheck(e){
{ //logic });
}
and apply this function on your checkbox onclick attr and pass event on this function
Here is one way of doing it, I assume the add class function is working for you, then use a button on click get all element with type=checkbox and it is input element with class selected. then print this value (put your logic here)
$('input[type=checkbox]').on('click', function(e) {
if (this.checked) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
$('#getAllCheckedValue').on('click', function() {
console.log('----------- getAllCheckedValue ----------------');
$("input.selected[type=checkbox]").each(function(ix, element) {
console.log('Checked-->' + $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="InventoryTable">
<tbody>
<tr>
1<input type="checkbox" value="1" class="test test2">
</tr>
<tr>
2<input type="checkbox" value="2">
</tr>
<tr>
3<input type="checkbox" value="3">
</tr>
</tbody>
</table>
<button id="getAllCheckedValue">
Get All Checked Value
</button>
How do I enable all rows if one disabled row is present. I have a 2 kinds of buttons inside my table. First button, when you click it, it enables all the disabled buttons. The Second button, when you click it, it enables/disables the specific row it is assigned to.
HTML
<tr class="${fn:substring(monthInfo.month, 0, 3)}">
<c:if test="${stat.first}">
<td class="monthName" rowspan="6" value="${fn:substring(monthInfo.month, 0, 3)}">
<div class="vertical-text">
${fn:substring(monthInfo.month, 0, 3)}<br>
<img src="resources/images/edit.png" width="20%" href="#" />
</div>
</td>
</c:if>
<td><img class="editButt" src="resources/images/edit.png" href="#" /></td>
<td>${weekInfo.weekStart}</td>
<td>${weekInfo.weekEnd}</td>
<c:forEach items="${weekInfo.weeklyData}" var="week">
<td><input type="text" name="cell" class="hours" maxlength="2" value="${week}"></td>
</c:forEach>
<td class="weekTotal ibm-bgcolor-green-10 ">${weekInfo.totalHrs}</td>
<td class="holidayTotal">${weekInfo.totalHo}</td>
<td class="vacationTotal">${weekInfo.totalVl}</td>
<td class="sickTotal">${weekInfo.totalSl}</td>
<td><input type="text" name="cell" class="remarks" value="${weekInfo.remarks}"></td>
</tr>
jQuery
$('.editButt').click(function() {
$(this).closest('tr').find('input:text').prop('disabled', function(i, v) {
return !v;
});
});
$('.monthName').click(function() {
$("#test1table tbody tr").each(function() {
var className = $(this).closest('tr').find('td:first').text().trim();
var value = $('.' + className).find('input:text').is(':disabled');
if (!value) {
disableRows();
} else {
$('.' + className).find('input:text').prop('disabled', function(i, v) {
return !v;
});
}
});
});
What happens here is that if 2 rows are enabled. When I click the, the 1st button(.monthName). The 2 rows are enabled becomes disabled, and the disabled rows becomes enabled.
But I want is when I click the 1st Button. Regardless of there attribute, all rows will be enabled.
But I want is when I click the 1st Button. Regardless of there attribute, all rows will be enabled.
Enable all button
$("#enable-all").click(function(e) {
$("table").removeClass("disabled");
$("tbody tr").removeClass("danger");
$("table input, table button").prop("disabled", false);
});
Disable all button
$("#disable-all").click(function(e) {
$("table").addClass("disabled");
$("tbody tr").addClass("danger");
$("table input, table button").prop("disabled", true);
});
or a toggle button
$("#toggle").click(function(e) {
$("table").toggleClass("disabled");
$("tbody tr").toggleClass("danger");
var isDisabled = $("table").hasClass("disabled");
if (isDisabled) {
$("table input, table button").prop("disabled", true);
} else {
$("table input, table button").prop("disabled", false);
}
});
jsfiddle
I have one small problem with my JQuery Code.
I created simple table in HTML.
<table class="table">
<tr>
<th>Name</th>
<th>Surname</th>
<th></th>
</tr>
<tr>
<td>name 1</td>
<td>surname 1</td>
<td>actions</td>
</tr>
<tr>
<td>name 2</td>
<td>surname 3</td>
<td>actions</td>
</tr>
</table>
Then I want to highlight the row in yellow, when I click on this row
So when I am click on row add class "selected" but when I click on another row I have to remove "selected" class from previous row. So I tried create JQuery action
$('tr').not(':first').click(function () {
var table = $(this).closest("table");
var rows = table.children("tr");
alert(rows.length);
rows.each(function () {
$(this).removeClass("selected");
});
$(this).addClass('selected');
});
I tried find closest table from this clicked row and get all children <tr>,
next in loop remove "selected" class and add to clicked row this class.
But always alert(rows.length) return me 0 rows :<
Please help me.
Thanks.
why not simply
$('tr').not(':first').click(function () {
$(this).addClass("selected"); //add class selected to current clicked row
$(this).siblings().removeClass( "selected" ); //remove class selected from rest of the rows
});
First remove class from the selected one, then add the class to the new one.
$('tr').not(':first').click(function () {
$('tr.selected').removeClass("selected");
$(this).addClass('selected');
});
Write this:
$('.table tr').not(':first').on('click', function(){
$('.table tr').removeClass('selected');
$(this).addClass('selected');
});
As per your question, write like this:
var rows = $(this).siblings("tr");
Instead of:
var rows = table.siblings("tr");
$('#maintable tr').click(function (event) {
});
<table>
<tr>
<td>
<INPUT TYPE='Checkbox'/>
</td><td>
abc
</td><td>
xyz
</td>
</tr>
</table>
I have to click on td where td does not contain a checkbox. How should i do it?
I used $('#maintable tr:not(input[type='checkbox'])').click(function (event) {
but it does not work.
$('#maintable tr td:not(:has(:checkbox))').click(function (event) {
Fiddle Demo
Read
:not()
:has()