I'm having trouble selecting all the last inputs on a set of divs with tables inside them. Here's a jsFiddle of my issue.
A simplified version of my HTML structure:
<div class=".container">
<table>
<tbody>
<tr>
<td> <input /> </td>
<td> <input /> </td> <!-- last input in container -->
</tr>
</tbody>
</table>
</div>
<!-- More like this -->
<div class=".container"> ...
So if I had 5 .container the resulting selection would have 5 input's
I tried the following selector:
$('.container input:last-child')
You can select the last td and get its child input like:
var $inputs = $('.container td:last-child>input');
Demo: https://jsfiddle.net/bonh4r0g/
Related
Is there a way to check checkboxes based on text that follows them? An App at work that requires me to check ALOT of boxes depending on the text that follows. Seems like it could be done programmatically, but it's definitely beyond my limited knowledge
Here's an obscured snippet of the page.
<tr>
<td><span title="original"><input id="a0" type="checkbox" name="orginal_a0" value="0"><label for="a0">
<div class="List">
<div>
<div>Default Thing</div>
</div>
</div>
</label></span></td>
</tr>
<tr>
<td><span title="original"><input id="a1" type="checkbox" name="original_a1" value="1"><label for="a1">
<div class="List">
<div>
<div>New Thing</div>
</div>
</div>
</label></span></td>
</tr
I know I could based on the input id or name, but unfortunately they don't help identify if I should or should not check the box. It's the text that follows the box that's important. If iIcould make it so it would check any box that begin with "New" or any other text, but also not check the ones that begin with "Default". So in the example above I'd check the 2nd box and not check the 1st one. In the app it's generally checking 50-75 boxes but leaving a similar amount unchecked. Ideally it would be something I could just type into the console or make into a bookmarklet.
Is this possible?
You could loop over all the cells, check if the text doesn't begin with default and set the checked state to the input
As a side note it's better to not nest a div element inside an inline element like a span or a label
const td = document.querySelectorAll('td');
[...td].forEach((cell) => {
const text = cell.textContent.trim();
if (!text.match(/^default/i)) {
cell.querySelector('input').checked = true;
}
});
<table>
<tr>
<td>
<span title="original">
<input id="a0" type="checkbox"
name="orginal_a0" value="0">
<label for="a0">Default Thing</label>
</span>
</td>
</tr>
<tr>
<td>
<span title="original">
<input id="a1" type="checkbox"
name="original_a1" value="1">
<label for="a1">New Thing</label>
</span>
</td>
</tr>
</table>
This example loops through all the checkboxes and grabs the next element, which is assumed to be the label. If the div indicated doesn't begin with "Default" it will check the box.
const allCheckboxes = document.querySelectorAll("input[type='checkbox']");
for (let checkbox of allCheckboxes) {
// get the label element and locate the appropriate div within
let appropriateDiv = checkbox.nextElementSibling.querySelector("div.List div div");
if (appropriateDiv && !appropriateDiv.innerText.startsWith("Default")) {
checkbox.checked = true;
}
}
<table><tbody>
<tr>
<td><span title="original"><input id="a0" type="checkbox" name="orginal_a0" value="0"><label for="a0">
<div class="List">
<div>
<div>Default Thing</div>
</div>
</div>
</label></span></td>
</tr>
<tr>
<td><span title="original"><input id="a1" type="checkbox" name="original_a1" value="1"><label for="a1">
<div class="List">
<div>
<div>New Thing</div>
</div>
</div>
</label></span></td>
</tr>
</tbody></table>
I'm trying to replace all the span elements in a set of td. They have this content:
<span class='close_span'>
<input type="button" class="close_pop_btn removebtn"/>
</span>
The full td is like this:
<td>
<span class='close_span'>
<input type="button" class="close_pop_btn removebtn"/>
</span>
<!-- other tags here -->
</td>
I want to remove all the span elements with the class close_span in all the tds and get the resulting string in a jquery/javascript variable. Is that possible, and if so how?
Try using .end() at close of .remove() , which should return document , .find() with selector "table" . From here can select to return entire table html using .get() , .outerHTML ; alternatively all td html using .find(table td).map(function() {return this.outerHTML}).get()
var tableHTML = $("table span").remove().end()
.find("table").get(0).outerHTML;
console.log(tableHTML)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table>
<tbody>
<tr>
<td>
<span class='close_span'>
<input type="button" class="close_pop_btn removebtn"/>
</span>
<!-- other tags here -->
<div>div 1</div>
</td>
</tr>
<tr>
<td>
<span class='close_span'>
<input type="button" class="close_pop_btn removebtn"/>
</span>
<!-- other tags here -->
<div>div 2</div>
</td>
</tr>
</tbody>
</table>
If you want only td's content after remove spans:
var tdsWithoutSpan = $('td')
.find('> span.close_span')
.remove()
.end();
tdsWithoutSpan.each(function (index, td) {
console.log(td);
});
But if you want table's content:
var table = $('table')
.find('td > span.close_span')
.remove()
.end();
console.log(table.parent().html());
I am new to jQuery and hope someone can help me with this.
I have a large HTML table with dynamically added rows.
The table has a standard structure (incl. thead, tbody and tfoot).
Within this table there are editable TDs (which have the class "editable" and contain a contenteditable div) and non-editable TDs (which dont't have the class "editable" and do not contain a div).
If a user is in such a div I would like to check if the current (closest) TD is the last TD within the same row that has a certain class ("editable").
I tried the below but this doesn't work here. Can someone tell me what I am doing wrong ?
My jQuery (in doc ready):
$(document).keydown(function(e){
var current = $(e.target);
// ...
if($(current).closest('td').is('td.editable:last')){
alert('last editable td in current row'); // test alert
}
// ...
});
My HTML (example row):
<tr>
<!-- ... -->
<td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
<td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
<td></td> <!-- non-editable -->
<td></td> <!-- non-editable -->
<td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
<!-- ... -->
</tr>
Try the :last-of-type selector? Never use :last or :first, as they are implemented differently in every browser!
if ($(current).closest('td').is('td.editable:last-of-type')) {
Use jQuery index() like
$('div').click(function() {
var editables = $(this).closest('tr').find('td.editable')
var count = editables.length;
if(editables.index($(this).closest('td')) == (count - 1))...
});
The above should not return an index if closest('td') does not have class editable
$('div').click(function() {
var editables = $(this).closest('tr').find('td.editable')
var count = editables.length;
console.log('Is last editable td: ' + (editables.index($(this).closest('td')) == (count - 1)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<!-- ... -->
<td class="editable">
<div contenteditable="true">test</div>
</td>
<!-- editable -->
<td class="editable">
<div contenteditable="true">test</div>
</td>
<!-- editable -->
<td>
<div contenteditable="true">not editable</div>
</td>
<!-- non-editable -->
<td>
<div contenteditable="true">not editable</div>
</td>
<!-- non-editable -->
<td class="editable">
<div contenteditable="true">test</div>
</td>
<!-- editable -->
<td>
<div contenteditable="true">not editable</div>
</td>
<!-- ... -->
</tr>
</table>
Fiddle
<table>
<tr>
<td class="editable"><div contenteditable="true">11</div></td>
<td class="editable"><div contenteditable="true">22</div></td>
<td>33</td>
<td>44</td>
<td class="editable"><div contenteditable="true">55</div></td>
</tr>
</table>
$("table tr td.editable").keydown(function(){
var col = $(this).parent().children().index($(this));
if(col == $(this).parent().children().size() - 1){
alert('last editable td in current row'); // test alert
}
});
Hey you can try this: https://jsfiddle.net/alaingoldman/5cseugvs/1
Basically what i did is i targeted the table tag and looked through it's descendants with the pseudo class last-of-type.
Hopefully this helps. Cheer.s
$('table tr:last-of-type').css({backgroundColor: "pink"})
I cant seem to find the right jquery selector for this tag:
HTML:
<div class="span4 span4-mod">
<div class="well well-mod">
<h4 class="DomainDescription">Iniz LAX1</h4>
<span class="btn-block">
<button></button>
</span>
<form action="pinfo.php" method="post">
<input type="hidden" value="">
<button>History</button>
</form>
Port Status<br />
<span class="portstatus porton">21</span>
<table class="table" style="margin-top: 10px;">
<tbody>
<tr>
<td><strong>Distro:</strong></td>
<td class="showdistro">Debian 7.1</td>
</tr>
<tr>
<td><strong>Online since: </strong></td>
<td class="showonline">2 Days 10:29</td>
</tr>
</tbody>
</table>
</div>
I'm trying to search for the class "DomainDescription", and then search for the HTML within the class "showonline", and manipulate the latter.
I'm looking for the relationship of sibling (table) >child (tbody) > child (tr) > child (td)
Try as I may, I cant seem to find a proper selector for this kind of relationship.
I began by:
$('.DomainDescription').each(function () {
var PrintedUptime=$(this).siblings().children(".showonline").html();
alert (PrintedUptime);
});
What should the proper selector be?
you can
$('.DomainDescription').each(function () {
var PrintedUptime=$(this).closest('.well-mod').find(".showonline").html();
alert (PrintedUptime);
});
Demo: Fiddle
The correct css selector is:
.DomainDescriptor~table>tbody>tr>td>.showonline
I think that is correct, at least. Therefore, you can use:
$('.DomainDescriptor~table>tbody>tr>td>.showonline').each(function(){
alert(this.html());
})
to achieve the desired effect. This is not tested.
I have a table: in first row I have an anchor to click, in second - <asp:CheckboxList /> expanding to another table.
How can I access inputs inside that table using jQuery? I want to select all using one link, and deselect all using another one.
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<!-- Anchor to click -->
<a onclick="do stuff" href="javascript://">Select all</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<!-- CheckboxList -->
<table id="ctl00_commonForm_ctl00_ctl00_listCheck" class="list" border="0">
<tbody>
<tr>
<td>
<!-- input to select -->
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0" name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1" name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
I tried $(this).parent().('#list > input') but it doesn't work. I'm not familiar with jQuery, so please help. Thanks!
This is the jQuery I think you need:
// When the select link is clicked
$('#selectall').click( function ( ) {
\\ For each checkbox inside an element with class "link" set to checked
$('.list input[type=checkbox]').attr('checked','checked');
});
You need to change your link to this:
<a id="selectall" href="javascript:void( );">Select all</a>
Similarly, for deselect, jQuery:
$('#deselectall').click( function ( ) {
$('.list input[type=checkbox]').removeAttr('checked');
});
Link:
<a id="deselectall" href="javascript:void( );">Select all</a>
Because it would hurt me not to, I've got to warn against using tables for laying out your form. It's very bad practice these days, and you can make a layout that looks as good, but is more flexible, using divs and CSS. I'd go for:
<div id="select_links">
<!-- Anchor to click -->
<a id="selectall" href="javascript:void( );">Select all</a>
<a id="deselectall" href="javascript:void( );">Deselect all</a>
</div>
<div class="list">
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_0"
name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
</div>
<div class="listItem">
<input id="ctl00_commonForm_ctl00_ctl00_listCheck_1"
name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked"
type="checkbox">
<label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
</div>
</div>
EDIT: Mark's right, that should have been removeAttr(checked), not attr('checked',null);
It is as simple as just targeting all checkboxes and setting the checkbox.
$("#doIt").click(function(){
$("input[type='checkbox']").attr("checked", true);
});
If you want to remove the check
$("#doIt").click(function(){
$("input[type='checkbox']").removeAttr("checked");
});
Another option would be to use toggle() which can be used to toggle checkboxes on an off.
$("#doIt").toggle(function() {
$(this).text("Select All");
$("input[type='checkbox']").removeAttr("checked");
}, function() {
$(this).text("Deselect All");
$("input[type='checkbox']").attr("checked", true);
});
Code example on jsfiddle.
I would remove any dhtml code from your anchor tag, get rid of the onclick and change the href to just #. With jquery all you need is a class or id.
so you should have:
in your html:
<a id="select_on" class="toggle_checks" href="#">Select all</a>
<a class="toggle_checks" href="#">Select none</a>
in your javascript:
$('a.toggle_checks').click(function(){
$('table.list').children('input').attr('checked', this.id == 'select_on');
});
so what this code is doing is $('a.toggle_checks') is selecting all anchor tags with class toggle_checks, binding a click event handler, when clicked $('table.list') selects the tables with class list, .children('input') selects the inputs within those tables, and the attr part sets the checked attribute to checked if the anchor tag has the id select_on and not if otherwise.