how can I figure out that cells are of same row - javascript

I have a html table with 3 columns and 7rows. When I click on a cell its bg is changed to red. I want to make sure that only one cell from each row is selected. So if I am clicking on a cell from row1, which has already a cell selected, I want the prev cell to be deselected and the new cell selected. I want to know how can I figure out that cells are of same row.

Given a table cell, its parentNode will be the containing row, and table rows have a cells property that contains a collection of all the cells. So you can loop through that collection.
function selectCell(cell) {
var siblings = cell.parentNode.cells;
for (var i = 0; i < siblings.length; i++) {
if (i != cell.cellIndex) {
siblings[i].style.backgroundColor = normalBGColor;
}
}
cell.style.backgroundColor = highlightBGColor;
}

If you are using jQuery, in your click handler, do this:
function() {
$(this).closest('tr').find('td').css('backgroundColor', '');
$(this).css('backgroundColor', 'red');
}

You can iterate through the rows, and iterate through the cell in an embedded for loop. The solution provided by John Hartsock on this stackoverflow page should allow you to qualify each cell by row and column.
How do I iterate through table rows and cells in javascript?

Related

eventlistner in table each row only trigger last row

I'm writing a table allow user click table row and show the hidden rows.
I use addEventListener with loop to allow each table row call the hidden rows under the row.
For example:
row A
row B
after clicking row A, hidden rows will show under row A and above row B
row A
hidden row 1
hidden row 2
row B
however, my code will always and only trigger the last row. If there are 15 rows in the table could click and show rows. Only the hidden rows of 15th row will show. No matter I click 1st row or 15th row, the web always show the 15th row.
var id = "";
var count = 1;
var table = document.getElementById("header_table");
for (var i = 0; i < r.length - 1; i++) {
id = 'detail_' + i;
console.log(id);
table.rows[count].addEventListener('click', function () {
console.log("clicking row " + i);
$("." + id).toggle();
});
count = count + 6;
}
Thank you all, I solved my question. I should bind the parameter into the function.
Reference: Function.prototype.bind
I had a similar problem with my program.
I needed to add an event listener to each row of a table, so I made a for-each loop of the rows and added the event listener:
for (var r of table.childNodes[0].childNodes) {
r.addEventListener("click", () => {
// Do Stuff To Row 'R'
for (var c of r.childNodes) { // Access all cells in row 'r'
c.style.backgroundColor = "blue" // Change the background of all cells in row 'r'
}
}
}
The way the program ran made it so when I would click on a table, row r held the value of the last row in the table, making it such that if row r were to be changed in the event listener, it would only be changing the last row.
It took me hours to figure out, but the solution was to change the loop from var r to let r:
for (let r of table.childNodes[0].childNodes) {
r.addEventListener("click", () => {
// Do Stuff To Row 'r'
for (var c of r.childNodes) { // Access all cells in row 'r'
c.style.backgroundColor = "blue" // Change the background of all cells in row 'r'
}
}
}

Jquery contenteditable for all cells not rows

I create a table by adding rows and columns with JS and Jquery.
This is my code:
function AddColumnToDataTable(){
$('#tableHeader').append("<th> Header </th>").attr("contenteditable", true);
// Add a new ColumnHeader and set the property "editable"
}
function AddRowToDataTable(){
var count = $('#tableHeader').find("th").length;
// Get the count of Columns in the table
var newRow = $('#tableBody').append("<tr></tr>");
// Add a new Row
for(var i = 0; i < count ; i++){
newRow.find('tr').last().append("<td> Content </td>").attr("contenteditable", true);
// Fill the cells with a default text and set the property "editable"
}
}
So my question is, how can I write the code, that each cell is editable? At the moment, when I click, the whole row goes editable? Each cell should have that property.
I found a code that could help:
//$('table th:nth-child(4)').attr("contenteditable", true)
This makes the 4th header/cell editable, but how can I use it, each new created header/cell is the nth-child?
The jQuery append function doesn't return the new [appended] element, rather it returns the element that was appended to, hence the error in your code. Regardless, it's easier just to set the attribute manually in the append string. So, change this line:
newRow.find('tr').last().append("<td> Content </td>").attr("contenteditable", true);
To this:
newRow.find('tr').last().append("<td contenteditable="true"> Content </td>")
That should do it
It worked with
$('table td').last().attr("contenteditable", true);

jQuery DataTables clear table except the first row

I am using jquery datatables. I want to clear table except the first row.
var table = $('tableId').DataTable({});
Sample:
tr1
tr2
tr3
table.clear().draw(); //This clear all rows, How do I exclude first row
clear table:
tr1
How about this - I've used .rows().remove() instead of .clear(), so I could select which rows should be removed.
$('#deleteAll').click(function(){
//get first element
var firstElement = $('tbody > tr').first();
/*remove all <tr> which are coming after the first element and
redraw the table */
table.rows(firstElement.nextAll('tr')).remove().draw();
});
Fiddle

jquery array of nodes

I have a table with 2 columns. One column with a checkbox and another one with plain text. I would like to generate an object array with the the check state and the text. I can go tr after tr with this:
$('#divInfCambios .frozen-bdiv tr').each(function(i)
{ ... }
How can access to td[1], check the state, and recover the text of td[2]?
I got the check state with:
$(this).find('input[type="checkbox"]').prop('checked')
I need now how to access node 2 (td[1]) and grab the text.
//run through each row
$('#divInfCambios .frozen-bdiv tr').each(function (i, row) {
var getInputByName = $(this).find('input[name="selection"]');
if (getInputByName.is(':checked') ){
}
// assuming you layout of the elements
var tds = $(this).find('td');
var getTdText = tds.eq(1).text();
});

creating the table rows based on the selection of the dropdown lists

I need a code which creates me the table row based on the selection of the dropdown lists.For example if i select 3 then i need 3 rows to be create.I am able to create the rows dynamically but on the change of the ddl value i am not able to delete the previous rows which were getting created.How can i achieve that using jquery or java script.
Thanks Sagar.
So you just want to remove the rows from the table and then add X amount of rows to it?
What you want is the jQuery remove method:
// Get the table and delete the rows
var $table = $("#tableId");
$table.find("tr").remove();
// Get the row count and create the number of rows
var rowCount = GetYourRowCount();
for (var i = 0; i < rowCount; i++)
{
var $tr = $("<tr>");
$table.append($tr);
}

Categories

Resources