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());
Related
I want the table to be searched only in the H3 tag, not TD tag.
And if a result is found, its TR should be hidden
-h3 is a Child tag under TD.
for Example:
<tr>
<td>
<h3>Hier</h3>
<div></div>
</td>
</tr>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
const value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
console.log(value);
});
});
</script>
Thank you For Help
The main issue in your code is because you're searching through the text of the tr as a whole. You need to call find('h3') and then compare to the text in that element.
Also note that filter() is intended to do just that; filter a collection of elements and return a subset of them. You shouldn't call toggle() within it. Instead call hide(), filter to find matches, then show() them.
jQuery($ => {
$("#search").on('input', e => {
const value = $(e.target).val().toLowerCase().trim();
$("table tr").hide()
.filter((i, tr) => $(tr).find('h3').text().toLowerCase().indexOf(value) > -1).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="text" name="search" id="search" />
<table>
<tr>
<td>
<h3>Foo</h3>
<div></div>
</td>
</tr>
<tr>
<td>
<h3>Foo bar</h3>
<div></div>
</td>
</tr>
<tr>
<td>
<h3>Hier</h3>
<div></div>
</td>
</tr>
</table>
<tr class="Action Head" data-index="1">
<td class="Template">
<div class="Description">
<span class="Text Description" id="MainDescription">text</span>
</div>
</td>
</tr>
How can I remove element with class="Action Head" if span that's inside it with id="MainDescription" contains some specified text?
You can use Array.filter to select elements by their content, using a function that checks the content of the element to see if it matches your required criteria. For example:
//variable rowsToRemove will be an array that contains all the rows that contain
//a span with id MainDescription which contain the word 'text'
var rowsToRemove = [].filter.call(document.querySelectorAll('.Action.Head'), function(row){
var mainDescriptionSpan = row.querySelector('span#MainDescription');
return (mainDescriptionSpan && mainDescriptionSpan.textContent.indexOf('text') != -1);
});
if (rowsToRemove.length) { //if there are some row(s) that match the criteria...
rowsToRemove.forEach(function(row){ // ... loop through all of them ...
row.remove(); // ... and remove them.
});
}
You can use the function querySelectorAll to gather the whole set of elements Action Head then loop over those elements and for each Action Head element get its span element.
With that span element check the attribute textContent.
This code snippet will remove only one TR.
var actions = document.querySelectorAll('.Action.Head');
Array.prototype.forEach.call(actions, function(action) {
var span = action.querySelector('span');
if (span.textContent === 'text') span.remove();
});
<table>
<tbody>
<tr class="Action Head" data-index="1">
<td class="Template">
<div class="Description">
<span class="Text Description" id="MainDescription">text</span>
</div>
</td>
</tr>
<tr class="Action Head" data-index="1">
<td class="Template">
<div class="Description">
<span class="Text Description" id="MainDescription2">text2</span>
</div>
</td>
</tr>
</tbody>
</table>
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/
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.