There is a simple markup.
I need to cross text in the same table row as checkbox when checkbox change state to 'checked'.
Any help appreciated.
function watcher(){
var checkboxElements = document.getElementsByClassName("checkbox");
for(var i = 0; i<checkboxElements.length; i++){
checkboxElements[i].addEventListener('change', function(){
if(checkboxElements[i].checked === true) {
table.querySelector("table").rows[i].style.textDecoration = 'line-through';
}
});
}
}
<table class='table'>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
</table>
My code seems doesn't work.
You need to find the ancestor using the function closest() along with the context this to get the reference of the checkbox element.
function watcher() {
var checkboxElements = document.getElementsByClassName("checkbox");
for (var i = 0; i < checkboxElements.length; i++) {
checkboxElements[i].addEventListener('change', function() {
if (this.checked) {
this.closest('tr').style.textDecoration = 'line-through';
}
});
}
}
watcher();
<table class='table'>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
</table>
Related
I have a table and I want to sort the rows by the user,Each row contains one input, for enter a row number. Here rows are sorted by data-sort Attribute in tr and each input has a rownum attribute whose value is equal to the value of the tr data-sort attribute.There are 6 rows here. We want to take the input value of each row, and move that row there, and the values of the attributes are the same as the input.For example, if you enter 1 in the input of one of the rows, that row will be our first row.
The following code runs for the first time, but after moving one of the rows does not work anymore.When its value changes. where is my mistake?
jsfiddle
$('.m').on('change', function () {
var Des = parseInt($(this).val());
var RowNum = parseInt($(this).attr('rownum'));
$('tr[data-sort="' + RowNum + '"]').attr('data-sort', -100);
$('input[rownum="' + RowNum + '"]').attr('rownum', -100);
if (Des > RowNum) {
for (var i = RowNum + 1; i <= Des; i++) {
var newVal = i - 1;
$('tr[data-sort="' + i + '"]').attr('data-sort', newVal);
$('input[rownum="' + i + '"]').attr('rownum', newVal);
}
}
if (Des < RowNum) {
for (var i = Des + 1; i <= (RowNum - 1); i++) {
var newVal = i + 1;
$('tr[data-sort="' + i + '"]').attr('data-sort', newVal);
$('input[rownum="' + i + '"]').attr('rownum', newVal);
}
}
$('tr[data-sort="-100"]').attr('data-sort', Des);
$('input[rownum="-100"]').attr('rownum', Des);
var divList = $("tr");
divList.sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});
$("tbody").html(divList);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>
as you rebuild and replace html piece of code on which you have your listener, you have to rebind event listener to the new created elements with class "m". Something as below (not elegant,only here to show a working example - and you don't need all your test. You just need to assign input value to data-sort attribut and then reorder with sort function)
$('.m').on('change', function (evt) {
changeOrder(evt);
})
function changeOrder(evt){
$this=$(evt.currentTarget);
var Des = parseInt($this.val());
var RowNum = parseInt($this.attr('rownum'));
$this.parent().parent().data("sort",Des)
var divList = $("tbody").find("tr").sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});
$("tbody").html(divList);
$('.m').on('change', function (evt) {
changeOrder(evt);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>
I would like to change the text of a cell on toggle switch within a row where the toggle switch resides.
Table
<table class="table" id="visitor_table">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td class="item_id">
#Html.DisplayFor(modelItem => item.VisitorId)
</td>
<td class="item_firstname">
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td class="item_lastname">
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td class="item_requeststatus">
#Html.DisplayFor(modelItem => item.RequestStatus)
</td>
<td id="item_checkbox">
#if (item.RequestStatus != "Pending")
{
<input id=#item.VisitorId onclick="toggleclick(#item.VisitorId)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
<label for=#item.VisitorId></label>
}
else
{
<input id=#item.VisitorId onclick="toggleclick(#item.VisitorId)" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
<label for=#item.VisitorId></label>
}
</td>
</tr>
}
</tbody>
</table>
Below is what the script should be
Script
function toggleClick()
{
if cell[4] is checked{
set cell[3] to "Approved"
} else {
set cell[3] to "Pending"
}
}
My code to the effect above is still nowhere near what I want to achieve. I've searched here and other websites and none works for me. See below for my feeble attempt.
Attempt
function toggleclick(x) {
var table = document.getElementById("visitor_table");
var row = $(table).closest('tr');
var x = row.find("td:eq(0)").html();
alert(x);
}
I really need your help on this. Thank you.
You need to pass current element toggleclick function
<input id=#item.VisitorId onclick="toggleclick(this, #item.VisitorId)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
toggleclick function will be like below.
Check below sample code
function toggleclick(_this, x) {
//var table = document.getElementById("visitor_table");
var row = $(_this).closest('tr');
if ($(_this).is(':checked')) // check if checkbox is checked or not
{
row.find("td:eq(3)").html("Approved"); //find 3rd cell and set HTML
} else {
row.find("td:eq(3)").html("Pending");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="item_id">
</td>
<td class="item_firstname">
</td>
<td class="item_lastname">
</td>
<td class="item_requeststatus">Approved
</td>
<td id="item_checkbox">
<input id=#item.VisitorId onclick="toggleclick(this,2)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
</td>
</tr>
<tr>
<td class="item_id">
</td>
<td class="item_firstname">
</td>
<td class="item_lastname">
</td>
<td class="item_requeststatus">Approved
</td>
<td id="item_checkbox">
<input id=#item.VisitorId onclick="toggleclick(this)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
</td>
</tr>
<tr>
<td class="item_id">
</td>
<td class="item_firstname">
</td>
<td class="item_lastname">
</td>
<td class="item_requeststatus">Approved
</td>
<td id="item_checkbox">
<input id=#item.VisitorId onclick="toggleclick(this)" checked="checked" class="switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
</td>
</tr>
</tbody>
</table>
This method will do what you need it to:
function toggleClick(event) {
var
inputElement = event.target,
// This only works as long as the input is a direct child of the row.
cellElement = inputElement.parentElement,
// This will return the td before the td with the input.
previousCell = cellElement.previousSibling;
previousCell.textContent = (inputElement.checked)
? 'Approved'
: 'Pending';
}
It is not very flexible, it expects the input element to be a direct child of the td element and if you add an extra column between 3 and 4 it will also cease working as intended.
You could try finding the closest tr element and within that element look for a td with the class item_requeststatus.
I have two tables that are filled with a number of checkboxes (the number is variable based on a retrieval profile defined on a previous screen). I've implemented a Select All check box at the top of each table with the following:
$('#select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
But this function selects all checkboxes in both tables (as it is poorly written to do). Is there an easy method of having the code select all checkboxes in each distinct tables.
Thanks.
You need to make your css more selective. It may not be necessary to use ids and an entirely different click function for each. You can probably just have a single click function bound to both and use the right selector, but hard to know without seeing your html.
If you post your html it will make it easier to help you, but you need something like the following:
$('#select_all1').bind('click', function() {
var checkedState = this.checked;
$('#table1 :checkbox').each(function() {
this.checked = checkedState;
});
});
$('#select_all2').bind('click', function() {
var checkedState = this.checked;
$('#table2 :checkbox').each(function() {
this.checked = checkedState;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select_all1"></input>
<table id="table1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<input type="checkbox" id="select_all2"></input>
<table id="table2">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
It is advisable you use class attribute for your table since Id's are supposed to be unique.
Create a variable to store value for table closest to checkbox current checkbox triggered and Concatenate the variable with Selector.
$('.selectAll').bind('click', function() {
var thisTable = $(this).closest('.checkTable');//closest table of this checkbox triggered
var checkedState = this.checked;//variable for checkbox checked.
$(':checkbox', thisTable).each(function(){//concatenate 'thisTable' variable with css selector and iterate
this.checked = checkedState;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="checkTable">
<tr>
<th> <input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="1"></td>
<td>Hello</td>
</tr>
<tr>
<td><input type="checkbox" id="2"></td>
<td>Hi</td>
</tr>
</table>
<table class="checkTable">
<tr>
<th><input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="3"></td>
<td>One</td>
</tr>
<tr>
<td><input type="checkbox" id="4"></td>
<td>Two</td>
</tr>
</table>
Use different id for different table or use class for table instead of id like so:
$('.select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
I have a table with bunch of checkboxes in each row. How can I find position of the checked box e.g. 1A or 1B when both or one of the checkboxes is checked in first row. The page I am trying to modify, dynamically makes the table based on two factors for the rows and columns. SO I just need to grab the rowname and colname in order to program further. e.g. 10(A) if the name of first row was '10'.
<table id="mytable">
<tr>
<td> </td>
<td align="center"> A </td>
<td align="center"> B </td>
</tr>
<tr>
<td> 1 </td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td> 2</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<tr> <button id="save">Click</button> </tr>
This will get the column and row of a checked input, and it gets the column letter and row number through calls to document.querySelector, using CSS3 first-child and nth-child selectors based on the column and row:
document.getElementById('mytable').addEventListener('click', function(e) {
if(e.target.tagName === 'INPUT') {
var td= e.target.parentNode, //the input's td parent
tr= td.parentNode, //the td's tr parent
col= td.cellIndex, //the input's column
row= tr.rowIndex, //the input's row
header= document.querySelector('#mytable tr:first-child td:nth-child('+(col+1)+')').textContent,
number= document.querySelector('#mytable tr:nth-child('+(row+1)+') td:first-child').textContent;
document.getElementById('output').textContent= number+header;
}
});
<table id="mytable">
<tr>
<td></td>
<td align="center">A</td>
<td align="center">B</td>
</tr>
<tr>
<td>1</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<div id="output"></div>
try this # plain javascript:
var checkboxes = [];
for(var i =0; i<document.getElementsByTagName("input").length;i++) {
if(document.getElementsByTagName("input")[i].checked) {checkboxes.push(i)}
}
checkboxes is an array of checked checkboxes - e.g. [0,2] if the first and the 3rd checkboxes are checked
or like this:
https://jsfiddle.net/zLy90w40/1/
function getCheckBox(){
var oneA = document.getElementById('1a');
var oneB = document.getElementById('1b');
var twoA = document.getElementById('2a');
var twoB = document.getElementById('2b');
if (oneA.checked){
alert("1 A was checked") ;
}
if(oneB.checked){
alert("1 B was checked") ;
}
if(twoA.checked){
alert("2 A was checked") ;
}
if(twoB.checked){
alert("2 B was checked") ;
}
}
I am trying to add the values the user enteres into the Slots cell in each row. I want to get the totals and place it in the SlotsTotals field. But, the code is not working at all.
function checkRow(){
var table = document.getElementById('tblSample');
for (var i = 0, row; row = table.rows[i]; i++){
document.getElementById('SlotsTotals').value += document.getElementById('txtSlots' + i).value;
}
}
I'm dynamically adding rows to a table. The user will input values into the slots field. I want to loop through the table to get a total of all the values and add then total to the SlotsTotal field.
Here is my some of my html to add the rows.
function addRow() {
//function ValidateRow(){alert('error');}
//function insertRow();
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
//var iteration = lastRow;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cell5 = row.insertCell(6);
var element5 = document.createElement('input');
element5.type = 'text';
element5.name = 'txtSlots' + iteration;
element5.id = 'txtSlots' + iteration;
element5.size = 10;
cell5.appendChild(element5);
}
could you post some of your html code please
maybe try
document.getElementById('SlotsTotals').innerHTML
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
__
maybe this can help :)
<table id='tblSample' style='border: 1pt, solid, black;'>
<tr>
<td>
...A1
</td>
<td>
...A2
</td>
<td>
...A3
</td>
<td>
...A4
</td>
<td>
...A5
</td>
<td>
<input type='text' id='txtSlots1'>
</td>
</tr>
<tr>
<td>
...B1
</td>
<td>
...B2
</td>
<td>
...B3
</td>
<td>
...B4
</td>
<td>
...B5
</td>
<td>
<input type='text' id='txtSlots2'>
</td>
</tr>
<tr>
<td>
...C1
</td>
<td>
...C2
</td>
<td>
...C3
</td>
<td>
...C4
</td>
<td>
...C5
</td>
<td>
<input type='text' id='txtSlots3'>
</td>
</tr>
<tr>
<td>
...D1
</td>
<td>
...D2
</td>
<td>
...D3
</td>
<td>
...D4
</td>
<td>
...D5
</td>
<td>
<input type='text' id='txtSlots4'>
</td>
</tr>
<tr>
<td>
...E1
</td>
<td>
...E2
</td>
<td>
...E3
</td>
<td>
...E4
</td>
<td>
...E5
</td>
<td>
<input type='text' id='txtSlots5'>
</td>
</tr>
</table>
<input type='button' onclick="test();" value="test">
<input type='text' id='SlotsTotals'>
<script>
function test(){
var table = document.getElementById('tblSample');
res = document.getElementsByTagName('input');
sum = 0
for (var i = 0; i < res.length; i++){
s = res[i].id
if((String(s).indexOf("txtSlots") > -1)&&(res[i].type == 'text'))
{
sum += parseInt(res[i].value)
}
}
document.getElementById('SlotsTotals').value = sum
}
</script>