I want to get a text of cell in a tr row.
The tr row has class attr and a data- attr.
I select the tr row as
var k = $('tr[class="BatchTypesRow"][data-rowselected="true"]');
then
var m = k.children("td:first");
var sBtype = m.text();
alert(sBtype);
the sBtype contains all cells' text in the row.
I tried
var sBtype = m[0].text();
that catches an exception.
So what is the problem here?
If the cell is not the first cell in the row, how to do it?
Here, m itself is the first td of the row since var m = k.children("td:first");
So m.text() would not give the whole row as long as td:first is selected. If you use .children("td") then you would be getting the whole row in m.text(). So in your code,
var sBtype = m.text();
alert(sBtype);
would actually give the First cell content.
If not the first cell, you would be using var m = k.children("td"); removing the keyword first. In this case m[0] would have the first cell, m[1] second and so on.
Correct me if am wrong, I believe this is how you got the exception, using m[0].text() would throw you an exception since m[0],m[1] are not JQuery object. They are HTMLTableCellElement Object.
To use it as a JQuery object, you would have to use $(m[1]).text().
And if you know which element to be selected w.r.t its sequence, you can use
var m = k.children("td:nth-child(n)");
where you can replace n with the number so that you will select the nth td of the row.
Hope this helps.
$('tr.selected td:first-child').text();
Firstly, select the tr within which lies the text.for which you can use the class attr
$("tr.BatchTypesRow")
then traverse down the tree to get the td ie its children
$("tr.BatchTypesRow").children("td")
as you need the first child ,is the first td as you traverse through the selected tr ,it can be further written as
$("tr.BatchTypesRow").children("td:first")
if the text lies within a label inside the selected td
$("tr.BatchTypesRow").children("td:first").children("label").text();
will give you the desired text .
Related
In HTML I have tables in tables.
So I have for example a table in a td element.
However when getting all td's for the closest row :
var row = $(this).closest('tr').find('td');
I am getting all the subchildren also (all td elements in the child table).
How you get all childs without sub elements ?
Thanks in advance
Did you try $(this).closest('tr').find('>td');
The > only select direct descendants (first level children)
You can use children():
var row = $(this).closest('tr').children('td');
Or alternatively include the direct descendant selector when using find():
var row = $(this).closest('tr').find('> td');
I have a table that automatically adds new rows, once u go to the last cell and tab over.
I click on one of the cells - I want to know the rowIndex of the clicked cell (row)
I havent been able to uniquely identify the cell using any attribute eg classname etc, ID is randomly generated. Name , TagName everything is generic - Same for all rows.
How do I get the rowIndex just using a cell's info
No jquery sols pls - not allowed in my framework
You can grab this info from the parent node tr as rowIndex:
td.parentNode.rowIndex
Here td is HTMLTableCellElement element.
td has a reference to its parent row element parentNode (tr), which in its own turn has a property rowIndex. Similarly td itself has a property cellIndex.
Demo: http://jsfiddle.net/prFSd/1/
dfsq provides a good answer, but it uses jquery which you said you could not use. You could put this in each rowonclick="myFunction(this)"then define the function
function myFunction(x)
{
alert("Row index is: " + x.rowIndex);
}
I need some jquery code to style all empty child tds only if the first td contains no text.
Right now my code styles all empty TDs as a greyish color (see image).
I only want the first row to be styled because the first TD contains text. In other words, I need to test if the first TD contains text and if so, add the grayish color on that row, if it is blank then don't add the coloring to the empty TDs.
jsbin for the above code:
http://jsbin.com/ojemuf/1/edit
Select rows, check if first child not is empty, get its matching siblings:
$('tr td:first-child:empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
$('tr td:first-child:not(:empty)').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
Apparently I had it backwards!
I hope I'm understanding your question right
loop trough the tr elements and if the first is not empty add a color to the empty td's inside the tr element
$('tr').each(function () {
if(!$(this).find('td').first().is(':empty'))
$(this).find('td:empty').css('background', '#ccc');
});
--- edit ---
Reversed edition of Mathletics
$('tr td:first-child').not(':empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
The question is a bit unclear whether you want to update the entire table when the first element is not empty or if you want to update every matching row. For the entire table, you can try this:
$("td:first:not(:empty)")
.closest("table")
.find("td[class*='_crew']:empty")
.css("background", "#DDCEC0");
From the description, it seems the other answers missed the fact that he wants this applied when the first element is NOT empty.
this following code works in adding new rows in HTMl:
function addRow()
{
var row = document.getElementById('row');
var newRow = row.cloneNode(true);
row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}
How can I add a new function to remove a row? I tried searching but couldn't find the answer.
To remove a DOM element in Javascript you use the removeChild API. This requires you to have the DOM element of both the container and the item you want to remove.
In this example if you wanted to remove the row with id row you would do the following
var row = document.getElementById('row');
row.parentNode.removeChild(row);
Documentation: https://developer.mozilla.org/En/DOM/Node.removeChild
Note: In this particular example it looks like you are adding multiple DOM nodes with the same id value. Having duplicate id values is not allowed and will cause you many problems down the road. Every id value needs to be unique.
One way to accomplish this would be to use a counter to append a unique suffix to every row you add.
var rowCounter = 0;
function addRow()
{
rowCounter++;
var row = document.getElementById('row');
var newRow = row.cloneNode(true);
newRow.id = 'new_row_' + rowCounter;
row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}
You are looking for the removeChild() function.
I think there is a problem with your addRow() function. You are cloning a node and then keeping the same ID of 'row'.
function addRow()
{
var row = document.getElementById('row');
var newRow = row.cloneNode(true);
// set newRow.id to something other than 'row'
row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}
To remove a node, you can use removeChild(), to remove a child node from an element
For example, x.removeChild(y) would remove child y of node x.
If you already have the targeted row, you'd do this...
row.parentNode.deleteRow(row.rowIndex);
https://developer.mozilla.org/en/DOM/table.deleteRow
The docs are for table, but tbody elements have the same method.
If you return the rows from the function before appending them to the DOM, you can record them in an object or array. Then you can easily remove them with removeChild (previously mentioned) without searching the document again.
The reason I want to do this is because I am having trouble changing the classes of td elements in certain browsers. I am wondering if it is possible to simply replace the entire element, caveats, code, and suggestions are all appreciated.
You can replace a table cell with another table cell just like any other element:
var td = <reference to td element>;
var newTd = document.createElement('td');
td.parentNode.replaceChild(newTd, td);
If you just want to add or assign a new class value, see qwertymk's answer.
You can use jQuery to easy remove some tds and replace them with new tds, i.e.:
$("td").remove();
$("tr").append("HTML CODE");
Did you try td.className += ' newClass' to add a class or td.className = 'newClass' to assign it just one class?