Can anyone give an idea on how to remove <td> inside <body> without CLASS "response" usig Jquery ? Please see may HTML Code below for sample .
CODE:
<table id="tblFruit" class=" table striped bordered hovered">
<thead>
<tr>
<th>Fruit Name</th>
<th>Color</th>
<th>Kilos</th>
<th>Price</th>
</tr>
</thead>
<tbody id="mybasket">
<tr>
<td class="response">Apple</td>
<td>Apple</td>
<td class="response">Red</td>
<td>Red</td>
<td class="response">5 kilos</td>
<td>5 kilos</td>
<td class="response">110.00</td>
<td>110.00</td>
</tr>
<tr></tr>
</tbody>
</table>
Try:
$('td').not('.response').remove();
Try to use :odd selector at this context to remove the td elements with out using the class,
$('#mybasket > tr > td:odd').remove();
DEMO
add css prperty in code
you can add inline css also
<td class="response" style="display:none">Red</td>
<td>Red</td>
or make class
.table td{
display:none;
}
$('td:not(.response)').remove();
Thanks all guys for idea, i found the answer
$('#bodyInfoMilestone tr > td').not('.response').remove();
Related
I have been learning about DOMs lately and have been stuck on a problem for days. For some reason, I cannot change the contents of a html table. I have been looking at w3 schools HTML and using DOM to change the table element.
Here is the code for the table :
<div id="courseSummaryContainer" class="tab">
<table cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
<thead><tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
<th>Submission entry type</th>
</tr></thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
<td>Final</td>
</tr>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
</tbody>
</table>
</div>
What I have been trying to do is change the names of the states and their values. To do so, I have been trying to access the <td> element.
To change the contents, I tried the following:
Say for example want to change "Illinois" to "Georgia" I tried the following
document.getElementById("table.summaryTable.courseSummary.smallFontTable").rows[2].cells;
x[1].innerHTML = "Georgia";
I am not sure what I am doing wrong however the console keeps giving errors all the time stating the values are null.
Can somebody please offer their guidance?
Use document#querySelector. In this case a simple selector can be .row-even > td:first-child because you only have one .row-even.
How can you be more specific?
If you've got multiple .row-even, by using tbody > tr:nth-child(1) > td:first-child.
If you have multiple tables with .row-even, you can add the id of the container #courseSummaryContainer .row-even > td:first-child or the class of the table .courseSummary .row-even > td:first-child.
var td = document.querySelector('.row-even > td:first-child');
td.innerText = 'Georgia';
<div id="courseSummaryContainer" class="tab">
<table cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
<thead><tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
<th>Submission entry type</th>
</tr></thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
<td>Final</td>
</tr>
</tbody>
</table>
</div>
You are not getting the right element in the DOM, if you are going to use the function: "getElementById", you need to pass it the id of the element that you want to have, like:
html:
<div id="courseSummaryContainer" class="tab">
<table id="myTable" cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
//... Table content
</table>
</div>
js:
document.getElementById("myTable").rows[2].cells;
I have a following (simplified) table structure:
<table class="form-table">
<tbody>
<tr>
<tr><--Need to select and add class on this guy based on h3 class "check"-->
<th scope="row">
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
So i want to select "table row" above the h3 class "check". Table is generated dynamically so i can't just use :eq() ,:gt() or :lt().
To select this guy i am using this code:
$('tbody tr').find('h3.check').parent().addClass('cool');
$('.cool').parent().addClass('until');
But the problem is that i am giving an unnecessary class "cool" in order to make a selection.
<table class="form-table">
<tbody>
<tr>
<tr>
<tr class="until"><--Class successfully added but..-->
<th class="cool" scope="row"><--An extra Class in order to select "table row"-->
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
Is there a better way for doing this (without adding unnecessary Class) ?
You can use .has()
$('tbody tr').has('h3.check').addClass('cool');
or :has
$('tbody tr:(h3.check)').addClass('cool');
I have a litte problem with the PicNet table Filter. Here is the demo.
Here is my JS:
$(document).ready(function() {
// Initialise Plugin
var options = {
additionalFilterTriggers: [$('#quickfind')]
};
$('#dataTable').tableFilter(options);
});
Here is the HTML:
<body>
Quick Find: <input type="text" id="quickfind"/>
<table id='dataTable'>
<thead>
<tr>
<th>File</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">10.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">20.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">22.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
</tbody>
</table>
..
Is it possible to search with #quickfind in only one (first) column?
when I search in #quickfind for "22" I got 3 results because the right column has a "22" in the date and time.
I disabled in the CSS the .filter class with display:none; because I only want one searchfield. I copied the genererated javascript code and replaced it with the #quickfind.
<input type="text" id="filter_0" class="filter" >
filter_0 is for the first row. filter_1 is for the second row. And so on. But the code works only in the table! and not above.
Any ideas to solve the problem?
You can disable the search for column(s), just put filter='false' attribute in the header th tag(s).
<th filter='false'>Last modified</th>
I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>
try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});
updated demo
Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.
I know to style odd / even table cells using jQuery, but how do i style the 3rd, 4th or 5th element?
<table width="300" border="0" cellspacing="0" cellpadding="0" id="Weekdays">
<thead>
<tr>
<td>Week Day</td>
<td>Short Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Mon</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Tue</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Wed</td>
</tr>
<tr>
<td>Thursday</td>
<td>Thr</td>
</tr>
<tr>
<td>Friday</td>
<td>Fri</td>
</tr>
<tr>
<td>Saturday</td>
<td>Sat</td>
</tr>
<tr>
<td>Sunday</td>
<td>Sun</td>
</tr>
</tbody>
</table>
How do i do it?
Using eq():
$('td:eq(5)').css('background','red');
// OR:
$('td').eq(5).css('background','red');
Both of those examples would color the 6th TD element's background in red.
You can use .slice() to literally get an element range (though I'm not 100% sure that's what you're after), like this:
$("td").slice(2, 5).css("color", "red");
You can give it a try here this would select the following elements:
<td>Monday</td>
<td>Mon</td>
<td>Tuesday</td>
So I'm not sure what you mean by the element, here's a version using rows, just swap "td" for "tr" to get this.
$('#Weekdays tbody tr').each(function(i) {
// Modify the style of element i here
});
$('tr:nth-child(5)').function();
Theres a lot of things you don't know about CS3 :) http://www.w3.org/TR/css3-selectors/
To select childs from nth to last child of any element, simply use:
$("#mytable td").slice(n).hide()