Develop Reference

HTML cell DOM get attribute value - sort table.js

I'm trying to make the sorttable.js to read values from a custom tr attribute, which is "sort_value".
<table>
<thead>
<tr>
<th class="sort_string">Name</th>
<th class="sort_int">Age</th>
<th class="sort_int">Date of Birth</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adam</td>
<td>22</td>
<td sort_value="19930403">April 3 1993</td>
</tr>
<tr>
<td>Matt</td>
<td>20</td>
<td sort_value="19950220">Feb 20 1995</td>
</tr>
<tr>
<td>Josh</td>
<td>25</td>
<td sort_value="19900730">July 30 1990</td>
</tr>
<tr>
<td>Kent</td>
<td>27</td>
<td sort_value="19880322">March 22 1988</td>
</tr>
</tbody>
</table>
Here's the jsfiddle: http://jsfiddle.net/zz4mugen/6/
Everything is perfect except the date of birth column. Please take a look at the .js of the jsfiddle. It's on the external resources column.

You're using custom attributes, but the name is not valid. Own attributes have to start with data-. See the official documentation: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
Below an interesting blog with explanation and examples about sorting different types of values in tables, such as numbers, texts, currencies and dates for different locales.
https://yoast.com/articles/sortable-table/#example

how get information from variable in Jquery [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a variable X.
X="<table>...</table>"
How to get access to information in X using jQuery?
for example:
X="<table> <thead> <tr> <td>id</td> <td>name</td> <td>mpg</td> <td>cylinders</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>chevrolet chevelle malibu</td> <td>18.0</td> <td>8</td> </tr> <tr> <td>2</td> <td>plymouth satellite</td> <td>18.0</td> <td>8</td> </tr> <tr> <td>3</td> <td>amc rebel sst</td> <td>16.0</td> <td>8</td> </tr> </tbody> </table>"
and I want to have information from 2 line.

You can do:
$(X).find("element").whatever
Example:
var x = "<div><span>hey</span></div>";
console.log($(x).find("span").text()); //logs "hey"

If you want to access text information then you can use
$(x).find("element").text()
if you want to access html content of an element then you can use
$(x).find("element").html()
if you want to find element inside then you can use
$(x).find("element")

With your specific question above, this will get you the text from the second row of the table...
var x = "<table> <thead> <tr> <td>id</td> <td>name</td> <td>mpg</td> <td>cylinders</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>chevrolet chevelle malibu</td> <td>18.0</td> <td>8</td> </tr> <tr> <td>2</td> <td>plymouth satellite</td> <td>18.0</td> <td>8</td> </tr> <tr> <td>3</td> <td>amc rebel sst</td> <td>16.0</td> <td>8</td> </tr> </tbody> </table>";
alert($(x).find("tr").eq(2).text());
Here's a working jsFiddle
If that's not what you want then you really need to tidy up your question and be more specific and helpful. Help us to help you :)

Select row in HTML table to update chart selection?

How do I setup an HTML+JS table with data associated to a chart (Flotr or D3); where I can multiselect rows and that will update what is shown in the chart? - I'll likely be using AngularJS, so their two-way data-binding might be of help...
E.g.:
<table>
<thead>
<tr><th>Vowel</th> <th>Amount</th></tr>
<thead>
<tbody>
<tr> <td>A</td> <td>3</td> </tr>
<tr> <td>E</td> <td>6</td> </tr>
<tr> <td>I</td> <td>7</td> </tr>
<tr> <td>O</td> <td>8</td> </tr>
<tr> <td>U</td> <td>9</td> </tr>
</tbody>
</table>
Would also be great to be able to go reverse as well, e.g.: pressing E and A on the pie graph would refresh the pie-graph + the table.

http://plnkr.co/edit/x1jGW0lqKyzV7EKsVAbJ?p=preview
Here is the example of how you could do it.
Once you create an directive to connect your data with the DOM, then
it is simple matter of handling the data model through template.
I reused the flot integration directive that I used for other project.
(This 'reusability' is what I love about AngularJs.)

javascript in select in selenium

I'm trying set item in select using javascript (in variable I have date)
Here is how I'm trying set this item
<tr>
<td>select</td>
<td>Recent-Year</td>
<td>value=javascript{d=new Date();d.getYear()}</td>
</tr>
I get:
[error] Option with value 'javascript{d=new Date();d.getYear()}' not found
of cource when I'm trying by this:
<tr>
<td>select</td>
<td>Recent-Year</td>
<td>value=2011</td>
</tr>
it works.
What I must to change in this code to set this item?
EDIT
I don't want to split this command into few commands, because in another testcase I have stored variable birthday
<tr>
<td>storeEval</td>
<td>new Date('1966,09,16')</td>
<td>dateOfBirth</td>
</tr>
and I have 3 selects : Birth-Day, Birth-Month and Birth-Yearand I don't want to create 3 variables.
I want to set items in select like this:
<tr>
<td>select</td>
<td>Birth-Year</td>
<td>value =${dateOfBirth.getFullYear()}</td>
</tr>

Store the JavaScript evaluation first (using storeEval) and then use this variable as your option value:
<tr>
<td>storeEval</td>
<td>new Date().getYear()</td>
<td>varYear</td>
</tr>
<tr>
<td>select</td>
<td>Recent-Year</td>
<td>value=${varYear}</td>
</tr>
That should work
Update: In response to your edit: you can't use the value= with JavaScript but you can use the storedVars variable available in the JavaScript environment to create all the variables you need. For example, storedVars['myVar'] can be accessed directly through Selenium as ${myVar}. Below, I use verifyEval to run some JavaScript that will create all the variables I need.
<tr>
<td>storeEval</td>
<td>new Date()</td>
<td>myDate</td>
</tr>
<tr>
<td>verifyEval</td>
<td>var date=storedVars['myDate']; storedVars['day']=date.getDate(); storedVars['month']=date.getMonth(); storedVars['year']=date.getFullYear();</td>
<td></td>
</tr>
Then you can select the options based on:
<tr>
<td>select</td>
<td>Birth-Day</td>
<td>value=${day}</td>
</tr>
<tr>
<td>select</td>
<td>Birth-Month</td>
<td>value=${month}</td>
</tr>
<tr>
<td>select</td>
<td>Birth-Year</td>
<td>value=${year}</td>
</tr>
I know it's not the ideal solution, but it does help a bit since you can't do value=javascript{...} (not that I know of anyway but if anyone else knows otherwise then please say).

Why is the colspan not working properly in this script? js bug or IE?

This question is related to this question I asked a little while back. The updated code is posted here. This to note is that i am looking to create a HTML table dynamically that looks similar to this:
<table>
<tbody>
<tr>
<td colspan="3" align="right">Header</td>
</tr>
<tr>
<td colspan="3" align="right">Header</td>
</tr>
<tr>
<td colspan="3" align="right">Header</td>
</tr>
<tr>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
</table>
I can get this done in markup but when I do it in js the colspan does not seem to work in IE7. Any hep will be greatly appreciated.

http://www.w3schools.com/jsref/prop_tabledata_colspan.asp
The colSpan javascript property has a capital S.