I have a JSFiddle here.
I am trying to access the text content of the div with class '.item_description' for all rows in a table where a checkbox has been checked, but I cannot seem to get it.The checkbox is in a nested table in each row.
My HTML is:
<table id="table-tasks-list" class="table-hover">
<tbody>
<tr id="row-task-10572" class="task-modal-row">
<td >
<div class="task_description pull-left" style="padding:5px 0 0 5px;">Qui at dolore sit alias cum voluptate ad...</div>
<table class="pull-right" style="border:none;">
<tbody>
<tr>
<td style="width:80px;border:none;">2015-02-23</td>
<td class="hours" style="width:30px;border: none;">8.00</td>
<td class="row-icon tasks-check-box" style="border: none;">
<label class="checkbox-hold">
<input type="checkbox" name="bill-task" id="chk-10572" class="task-checkbox ion-fw" checked=""><span class="fake-input checkbox-icon ion-android-checkbox-outline-blank ion-fw" data-chk-id="10572"></span></label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="row-task-10573" class="task-modal-row">
....
In my JS, I do:
$('table#table-tasks-list tbody tr td input.task-checkbox').each(function(i, check) {
if ($(check).is(':checked')) {
console.log($(check).closest('table#table-tasks-list tbody tr').find('.task_description').text());
}
});
But i get empty results. What have i missed? Thanks!
Use
$(check).closest(".task-modal-row").find(".task_description").text();
To access the content of the closest .task_description
According to your code it should be like this:
$(check).closest('.task-modal-row').find('.task_description').text()
Demo : https://jsfiddle.net/TheRealPapa/sw5Lh6pa/1/
Your closest() targets the whole table and outputs the contents of all .task-description it finds, regardless of checkboxes. You only need to go up to the containing tr:
console.log($(check).closest('tr[id^="row-task-"]').find('.task_description').text());
I don't have an answer about why it doesn't work. However, I believe I reached similar problem and fixed it by using $(this) inside the loop instead of using the second argument of the callback function (check in your example). I hope this helps...
Related
I have an html table that includes rows:
<tr id="firstInRow"><td></td><td><input name="longP1" id="longP1" type="text" style="width: 70px"></td><td><input name="latP1" id="latP1" type="text" style="width: 70px"></td><td>(upper left)</td></tr>
<tr id="secInRow"><td></td><td><input name="longP2" id="longP2" type="text" style="width: 70px"></td><td><input name="latP2" id="latP2" type="text" style="width: 70px"></td><td>(lower right)</td></tr>
which creates a table like this:
latLongTable
I have already created an add row function that works, and I am trying to delete the contents of the last cells in that function. I want to remove the text "(upper left)" and "(lower right)". I tried a couple of ways, including:
var rowIn1 = document.getElementById("firstInRow");
rowIn1.deleteCell(-1);
But it doesn't work.
You can use .remove() function of jQuery.
For example:
$("#firstInRow").find("td:last-child").remove();
This will find the last column (td) of the row with id firstInRow and remove it from DOM. You can remove the other cell using the same method.
If you want to remove the content only then use:
$("#firstInRow").find("td:last-child").text('');
This will not remove the last column from DOM, instead it will clear the content from last column.
$("#clear").on("click", function() {
$("#firstInRow").find("td:last").text("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table border="1" cellpadding="5">
<tr id="firstInRow">
<td>First</td>
<td>Last</td>
<td>Content to clear</td>
</tr>
</table>
<button type="button" id="clear">Clear last column</button>
</body>
I have the following code:
<td class="bedrag">
#_ATT{Factuur bedrag}
</td>
<td class="paid">
#_ATT{Betaald}{Ja|Nee}
</td>
In the td paid the option can be given for Yes or No. I would like change the background of bedrag depending on what was chosen in the td paid. I figured the best way to go was to addClass using Javascript. So I googled around for a while and found this piece of code:
jQuery('a:contains("Sponsored")').closest('.post-item').addClass('sponz');
I changed it to fit my needs:
$('.paid:contains("Nee")').closest('.bedrag').addClass('sponz');
But that didn't work. So I tried the following code:
$('.paid:contains("Nee")').addClass('sponz');
This adds the class sponz to the td paid. But I want to add it to bedrag. So I then tried this:
('.bedrag:has(.paid:contains("Nee"))').addClass('sponz');
But this also didn't work.
Anyone know how to get this code working so that it will add sponz the the td bedrag when a user selects the option Nee? thanks in advance!
closest() isn't quite what you need as that looks for parents. .bedrag is a sibling of .paid, so you need to use prev() instead:
$('.paid:contains("Nee")').prev('.bedrag').addClass('sponz');
.sponz { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="bedrag">bedrag 1</td>
<td class="paid">Nee</td>
</tr>
<tr>
<td class="bedrag">bedrag 2</td>
<td class="paid">Ja</td>
</tr>
<tr>
<td class="bedrag">bedrag 3</td>
<td class="paid">Nee</td>
</tr>
</table>
Can't you just do an if?
if ($('.paid:contains("Nee")').length !== 0) { // there's at least an element
// add class to the right element
}
I have this HTML:
<table class="itemsTable table table-striped table-condensed table-hover">
<thead>
<tr>
<th>#</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr class="collapse">
<td class="center">1</td>
<td>
Title 1
</td>
</tr>
<tr class="collapse">
<td class="center">2</td>
<td>
Title 2
</td>
</tr>
<tr class="collapse">
<td class="center">3</td>
<td>
Title 3
</td>
</tr>
</tbody>
</table>
test
And jQuery:
$('.collapseBtn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.itemsTable').find('.collapse');
$collapse.collapse('toggle');
});
I want rows show/hide behavior on link click. What is wrong?
$.closest will look up the dom tree for a matching element - the .itemsTable isn't a parent of .collapseBtn - so $this.closest('.itemsTable') won't match any elements.
So, Either put the .collapseBtn within the table, or use $this.prev() instead of $this.closest('.itemsTable').
You can test if there are matching elements by running $('.collapseBtn').closest('.itemsTable') in the console
As of 130918_1100PST the selected answer is not correct. Although the writer did correctly identify why the closest() selector would not return any elements to collapse, this alone did not fix the OP's problem.
This selector will also work for selecting the elements to collapse:
$('.collapse').methodgoeshere();
but the elements won't expand/collapse -- it's not just a matter of the selector used.
The key to solving the problem, as user Chad identified in his jsFiddle below benjaminbenben's answer, is actually that the wrong method was used.
This did not work:
selector.collapse('toggle');
This did:
selector.toggle();
Therefore, the correct answer was:
$('.collapseBtn').on('click', function() {
$('.collapse').toggle();
});
jsFiddle here
I have the following test html:
<table width="80%" border="0" cellspacing="0" cellpadding="1" >
<tr>
<td class="tableBorder">
<table id="scriptsT" name="scriptsT" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="4" class="tableTitle">› College Foo - ScriptList:</td>
</tr>
<tr class="rowHeaders">
<td width="4%">ScriptName</td>
<td width="2%">Main Script (Radio)</td>
<td width="2%">(Ext)</td>
<td width="2%">Del Script</td>
</tr>
<tr id="foo[1]" name="foo[1]" class="rowHeaders">
<td id="sTD" name="sTD" width="4%">Script1</td>
<td width="2%">
<input type="radio" name="main" id="main" value="">
</td>
<td id="tTD" name="tTD" width="2%">Php</td>
<td width="2%"><input type="Button" class="textbox" name="SelScript" id="" value="DelScript" onClick="javascript: DelScript(1); return false;"></td>
</tr>
</table>
</td>
</tr>
</table>
=======================================================
I'm trying to remove the node, using the "DelScript function, that tries to use an ID to select the given TR, based on each TR having a unique ID, in this case foo[1], etc..
In my test DelScript, I 1st get the table, and then try to get the childnode (the "TR") to delete.
//--handle/simulate the deletion of the tr in the scriptTBL for the id
function DelScript(id)
{
var scriptTBL=document.getElementById("scriptsT");
var a="foo["+id+"]"
var test=document.getElementById("foo[1]");
//scriptTBL.parentNode.removeChild(test);
scriptTBL.removeChild(test);
alert("foo");
var a;
}
However, I'm screwing something up, as I'm not able to delete the node.
I'm running FF4, and firefox seems to be saying the node can't be found (???).
I've also tried using the parentNode a well but get the same results.
Thank you for any pointers.
If you just want to
"delete the TR where the clicked 'delete' button is located"
You don't need any of those id attributes.
<input type="Button" onclick="DelScript(this);return false;">
function DelScript(theClickedButton) {
var tr = theClickedButton.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
The table rows are not children of the <table>, they're children of the <tbody> element inside it. Even if there's not a <tbody> in your markup, there's one in the DOM. You could go up the DOM from the child element itself, or you could find the <tbody>
var tbody = document.getElementById('scriptsT').getElementsByTagName('tbody')[0];
FF is likely inserting a <tbody> element in between your <table> and <tr>, as the HTML specification demands. You don't even need to know the table ID. The attempt you commented out was almost right, but you need test.parentNode instead of table.parentNode - you want to get the row's parent node, not the table's:
function deleteRow(n){
var el = document.getElementById('foo['+n+']');
return el.parentNode.removeChild( el );
}
The TR is not a child of the TABLE. It is a child of the TBODY that is implicitly a child of the TABLE. Try this:
scriptTBL.children[0].removeChild(test);
Also, install FireBug so that you can browse the DOM tree and set breakpoints in your scripts to examine what they are doing to the dynamically rendered HTML.
I have a table like that:
<table id="myTable" cellspacing="0" cellpadding="10" border="0" width="100%">
<tbody>
....
<tr style="color: blue;" id="bankRecord377">
<td align="center" class="styleOdd"> <input type="checkbox" value="377" name="377"></td>
<td align="center" class="styleOdd">377</td>
<td align="center" class="styleOdd"></td>
<td align="center" class="styleOdd">391</td>
</tr>
....
<tr style="color: blue;" id="bankRecord386">
<td align="center" class="styleEven"> <input type="checkbox" value="386" name="386"></td>
<td align="center" class="styleEven">386</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">396</td>
</tr>
...
<tr style="color: blue;" id="bankRecord322">
<td align="center" class="styleEven"> <input type="checkbox" value="322" name="386"></td>
<td align="center" class="styleEven">322</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">314</td>
</tr>
...
</tbody>
</table>
class="styleOdd" makes row gray background class="styleEven" makes row background blue. I iterate over that table with Struts2 and define classes but user can remove some of table rows when he sees that HTML file. If user remove one of the table row, e.x. :
<tr style="color: blue;" id="bankRecord386">
...
</tr>
Colors of background was gray, blue, gray. However it is gray, gray now(because user removed a tr which includes classEven tds).
All in all what I want is iterate over that table again and defining classes styleOdd, styleEven, styleOdd, styleEven... again.
How can I do it with JavaScript or JQuery?
PS: I want to it for my table(which has id=myTable)'s every tds of trs.
EDIT: I want it except for the first tr(and it's tds).
You can use :even and :odd, but then you would iterate over the table rows twice. That might lead to unacceptable performance if your table has many rows.
I'd suggest using each() instead:
$("#myTable tr").each(function(index, row) {
var $cells = $("td", row);
if (index & 1) {
// Odd.
$cells.removeClass("styleEven").addClass("styleOdd");
} else {
// Even.
$cells.removeClass("styleOdd").addClass("styleEven");
}
});
You can use the :odd selector to target odd rows. (there is also a :even selector)
$('.td:odd').class('odd');
Trigger this when removing a row from the table to update classes.
There are also both CSS Selector but not widely supported.
$('#myTable tr:odd td').toggleClass('styleOdd', true).toggleClass('styleEven', false);
$('#myTable tr:even td').toggleClass('styleOdd', false).toggleClass('styleEven', true);
I believe you could also do it automatically using CSS. Although it requires a fairly modern browser.
Updated to take into account the table ID