I have an empty table in my code like so:
<table id='rostertable'></table>
When I add a <tr> using jQuery's append function, then according to my chrome inspector, my table looks like this:
<table id='rostertable'><tbody><tr>...</tr></tbody></table>
It seems like the tbody got added by itself, and this causes problems later when I'm traversing the DOM.
For consistency's sake, I figured it would be better if I added the tbody myself and appended directly to it. Is this possible? I tried making my placeholder <table id='rostertable'><tbody></tbody></table> but the jQuery selector $('#rostertable tbody') returns null and my chrome inspector doesn't show the tbody tags either.
Edit: Never mind, it ended up being an unrelated bug in my javascript. At one point I was clearing out the contents of the table and running $("#rostertable").html(""), which of course deleted the tbody. I accepted the first valid answer to this question.
You should not get null, if no element matches the selector still you will get object containing zero elements.
Your selector is returning tbody and you might be using some wrong method.
Live Demo
alert($('#rostertable tbody').html());
To append to the tbdoy your code should work as long as you append valid html.
The below works ok:
$('#rostertable tbody').append('<tr><td>new row - cell 1</td><td>new row - cell 2</td></tr>');
DEMO
You need to make sure you append a <td> as well as the <tr>. For example in Chrome, the following will simple add an empty <tr>
$('#rostertable tbody').append('<tr>no cells added, just row</tr>');
Related
Trying to get the first cell in a row by using first-child or nth-child, but the syntax isn't playing nice. This is what I'm trying and it isn't working:
....
sections[key][2][sections[key][2].length-1] //Table Row
$(sections[key][2][sections[key][2].length-1]+":first-child") //Should be first cell of row
....
Instead it returns the entire document...
Your selector:
$(sections[key][2][sections[key][2].length-1]+":first-child")
is attempting to concatenate a JavaScript object with a string, which will result in (something similar) [object HTMLTableRowElement]:first-child which, obviously, is not going to produce a jQuery object, or a DOM node.
Given that (you say) $(sections[key][2][sections[key][2].length-1] is the tr element (though why you're using that notation within a jQuery selector is a mystery to me), I'd suggest:
$(sections[key][2][sections[key][2].length-1]).find('td:first-child');
JS Fiddle demo.
Note the use of the td with the :first-child pseudo-class, in order to prevent selecting the first-child of all subsequent elements.
However, to get the first cell of all table-rows (using jQuery's more understandable notation) I'd suggest:
$('table tr td:first-child')
JS Fiddle demo.
Or, to use :nth-child() to get an arbitrarily-numbered td:
$('table tr td:nth-child(2)')
JS Fiddle demo.
Should be:
$(sections[key][2][sections[key][2].length-1]+" td:first-child")
If you just want to return the first child regardless, why don't you do:
sections[key][2][sections[key][2].length-1].firstChild
Do keep in mind that selecting via jQuery what you can get very easily via DOM is just slowing down your code for no good reason.
Can we use Jquery JQgrid with div element instead of table
No, you can't replace <table> to <div>.
The problem is that the code of jqGrid really work with the content of the grid as with the table. The DOM representation of <tr> element has cells and rowIndex properties (see here for example), the <table> has rows property (see here) which supports namedItem method (see here) and so on. The usage of methods which are specific for <table> improves performance of jqGrid code.
In any way the code of jqGrid really uses that main element of jqGrid is <table> and not <div>. So the code of jqGrid contains the following lines (see the source code)
if(this.tagName.toUpperCase()!='TABLE') {
alert("Element is not a table");
return;
}
In other words if you would use come other element (like <div>) instead of <table> you would get error message with the text "Element is not a table" instead of displaying the grid.
I think that jqgrid plugin has been created to design tables via jquery, so it will be a bit strange using it to design div instead of tables
I'm trying to remember the syntax for getting an element inside a table using JavaScript. I have a table with a checkbox in it. These are dynamic checkboxes or i would just use the getElementById. Here is how I'm doing it. I know I'm close, but just figured it out yet. Here is the code I have so far:
table_name.rows[0].cells[0].item[0]
or
tbl_run_avail.rows[1].cells[0].elements[0]
Since you're using DOM Level 0, you're probably looking for the childNodes property:
table_name.rows[0].cells[0].childNodes[0];
The above assumes that the check box is the very first child node of your table cell. In this situation, you can avoid unnecessary indexing by using the firstChild property:
table_name.rows[0].cells[0].firstChild;
It's easy if you use the children property:
yourTable.rows[0].cells[0].children[0];
This may sound like a simple question, but I just cannot seem to find an answer on google, probably because the search term will bring back quite a lot of irrelevance.
I would like a jQuery selector to select all odd table rows, that are not in <thead> and apply a css class to them all.
table.cp-ss-grid tr:odd
The above selector will bring back all odd rows in the table correctly, but will include the thead rows (on ie)
How would I in the selector do an and, i.e. something like:
table.cp-ss-grid tr:odd:not(thead)
the above doesn't work and still brings back the thead rows
Any ideas?
An AND selector for jQuery would be for example: .classA.classB
This would select elements which have classA and classB.
Why not do:
$('table.cp-ss-grid > tbody > tr:odd');
To explicitly select the body rows? All browsers will add a tbody for you if you don't have one.
if you use th to head and td to other rows ,
you can check that the have child of td,
.children('td')
table.cp-ss-grid tr:odd select all the odd rowb which will not include the header
if you want to specify a color of the header use :nth-child(n)
I use jQuery to get values of presaved elements from some websites, using paths like this:
HTML BODY #bodyContainer #mainContentContainer #mainContent #productContentRight #swatchContent #colorSwatchContent SPAN
The problem i faced when the websites page contains tables and there are same element in another similar path such as:
/html/body/div/center/div/div[3]/div/table/tbody/tr[5]/td/div/table/tbody/tr/td/table/tbody/tr/td/table/tbody/tr[3]/td
In the last path as you can see that there are 5 tr which means that its possible to find the same element in another path.
I use the path as a selector for jQuery and jQuery will return array of elements, i don't know which one is the right element.
So my question is:
How to save the path for better later use? and how to parse this new path to be ready as a jQuery selector.
If the question is not clear please ask me and i will do my best to explain more.
I don't know why there are so many answers that you are using XPath because XPath was deprecated a long time ago and jQuery no longer supports it without the XPath compatibility plugin.
See Release Notes of 1.2 : http://www.learningjquery.com/2007/09/upgrading-to-jquery-12
XPath compatibility plugin : http://docs.jquery.com/Release:jQuery_1.2#XPath_Compatibility_Plugin
Just use $("#colorSwatchContent span") as your selector. Which is a css style seclector meaning find me all descendent span elements of an element with id colorSwatchContent. Since id's in html are unique identitfiers, this is about as specific as you can get.
$("#colorSwatchContent > span") will only select DIRECT descendents (immedieate children)
$("#colorSwatchContent > span:first") will select the first span direct descendent
In order to grab one specific element when there are many that match you should give the elements classes, for example give each table a class describing what is in it, then give each tr a class describing what the row is about. Then each td with a class describing the specific part of the row that it describes, for example:
<table class="person">
<tr class="john-doe">
<td class="name">John Doe</td>
<td class="phone-numbers">
<table class="phone-numbers">
<tr class="cell-phone">
<th class="label">Cell Phone:</th>
<td class="number">555-1234</td>
</tr>
<tr class="home-phone">
<th class="label">Home Phone:</th>
<td class="number">555-1234</td>
</tr>
</table>
</td>
</tr>
</table>
Once you have your elements properly described then you can use CSS style selectors in jQuery. for example getting just the td that has the home phone would be as simple as doing:
$('table.person tr.home-phone td.number');
Hope this gets you heading the right way.
One thing to note tho, If you have incredibly complex table structures you might want to rethink whether it needs to be in a table or not.
tr[5] doesn't mean there are 5 trs (there could be 10!), it means that it is selecting the 5th one.
It looks to me like you are using an XPath selector to get your elements... which jQuery supports.
if you have control of the HTML, the easiest way to select a specific element is to give it an id... which in your first example,
HTML BODY #bodyContainer #mainContentContainer #mainContent #productContentRight #swatchContent #colorSwatchContent SPAN
is equivilant to
#colorSwatchContent SPAN
Since jQuery supports xpath you could use firebug to get the specific xpath, and then use that in jQuery.
Just browse the source in firebug, right click any element, and then choose copy xpath.