Develop Reference

How to get a value of <td> tag

I am getting <td value="1414">Nishant</td> by event.target. I want 1414 and as I try to get value by using event.target.value I am getting undefined. How can I get that value?

td elements don't have value. What you are looking for is to get the value of the attribute value of that element.
You can do this using the getAttribute function:
console.log(document.getElementById('a').getAttribute('value'));
<table>
<tr>
<td id="a" value="123">a</td>
</tr>
</table>

You should use data-* in order to "save" custom data on DOM node.
And then access it via domNode.dataset.* as a camelCase.
document.querySelector("table").addEventListener("click",function(e) {
console.log(e.target.dataset.value);
})
<table>
<tr>
<td data-value="123">a</td>
</tr>
</table>
for very old browsers you can use e.target.getAttribute("data-value")

Change the color and content in cell (static) by clicking and keep changes after reload

I am trying to make a status overview site for my work. I would like to make it like a table and where you click the cell then the cell will change between 3 options. I made an example here but I would like to have everything in one row.
<table border="1" style="width:100%">
<tr>
<th>Name</td>
<th>Status</td>
</tr>
<tr align="center">
<td>Martin</td>
<td bgcolor="green">Option 1</td>
</tr>
<tr align="center">
<td>Martin</td>
<td bgcolor="red">Option 2</td>
</tr>
<tr align="center">
<td>Martin</td>
<td bgcolor="orange">Option 3</td>
</tr>
</table>
Then I would like the page to save the changes. Do I need SQL or can I run some javascript or something?
Hope you can help me.

you can do it without using any server side database. you can use sessionStorage or localStorage (html5) it's easy. take a look at:
http://zenorocha.com/html5-local-storage/
or
http://www.w3schools.com/html/html5_webstorage.asp
if you're not able to get it by yourself, come back again and tell your new troubble

also, you can use cookies
https://github.com/carhartl/jquery-cookie
Set your td index and color,
and when page is reloaded - read all available cookies

How to use rowspan and colspan in tbody using datatable.js?

Whenever I use <td colspan="x"></td>, I get the following error:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined(…)
Demo
$("table").DataTable({});
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<table style="width:50%;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">3 4</td>
<td colspan="3">4 5 6</td>
</tr>
</tbody>
</table>
It's working properly without DataTables.js, but when we use this structure with datatable.js it is not working. We need above table structure. Does anyone have any idea how we can use this table structure datatable.js?

You can hack around the lack of colspan support by adding an "invisible" cell for every cell that's eliminated:
<tr>
<td colspan="3">Wide column</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr>
<td>Normal column</td>
<td>Normal column</td>
<td>Normal column</td>
</tr>
DataTables doesn't complain, the table renders normally and sorting works (invisible columns sort as the empty string).
I haven't tried this with rowspan.

COLSPAN: Ajax or JavaScript sourced data
Excellent solution provided by Dirk Bergstrom only works with HTML sourced data.
It is also possible to use the same idea with Ajax sourced data.
You need to use createdRow option to modify required cells when TR element is created in table body.
For example:
var table = $('#example').DataTable({
ajax: 'https://api.myjson.com/bins/qgcu',
createdRow: function(row, data, dataIndex){
// If name is "Ashton Cox"
if(data[0] === 'Ashton Cox'){
// Add COLSPAN attribute
$('td:eq(1)', row).attr('colspan', 3);
// Hide required number of columns
// next to the cell with COLSPAN attribute
$('td:eq(2)', row).css('display', 'none');
$('td:eq(3)', row).css('display', 'none');
// Update cell data
this.api().cell($('td:eq(1)', row)).data('N/A');
}
}
});
See this example for code and demonstration.
See jQuery DataTables: COLSPAN in table body TBODY - Ajax data article for more details.
ROWSPAN
It is possible to emulate ROWSPAN attribute using RowsGroup plug-in.
To use the plugin, you need to include JavaScript file dataTables.rowsGroup.js and use rowsGroup option to indicate indexes of the columns where you want grouping to be applied.
var table = $('#example').DataTable({
'rowsGroup': [2]
});
See this example for code and demonstration.
See jQuery DataTables: ROWSPAN in table body TBODY article for more details.
COLSPAN and ROWSPAN
It is possible to group cells both vertically and horizontally simultaneously if we combine both workarounds described above.
See this example for code and demonstration.
See jQuery DataTables: COLSPAN in table body TBODY - COLSPAN and ROWSPAN article for more details.

Simple solution is here.
<tr>
<td colspan="4">details</td>
<td style="display: none"></td>
<td style="display: none"></td>
<td style="display: none"></td>
</tr>
No other solution
https://datatables.net/forums/discussion/33497/cannot-set-property-dt-cellindex-of-undefined

If you are using scrollX
<thead>
<tr>
<th style="width: 20px;"></th>
<th>column H</td>
<th>column H</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Wide column</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr>
<td>123</td>
<td>Normal column</td>
<td>Normal column</td>
</tr>
</tbody>
Modified answer of #Dirk_Bergstrom

Refer below link.
fnFakeRowspan
Also refer the plugin here.
fnFakeRowspan plugin
Hope this will help you

I don't know at what point, but I guess the fnFakeRowspan does not support the current DataTable version.
For an alternative, checkout RowsGroup plugin.
Found it pretty easy to implement and works well.
Searching works perfectly, ordering doesn't.
Check here for an implementation.

Because datatables doesn't support colspan, I usually ended up with using unordered lists (ul) with list-style: none;
here is the result

Selenium IDE Using stored variable in javascript command

I want to create a JavaScript date using text I stored from my site.
This is what I tried:
<tr>
<td>storeValue</td>
<td>name=contract_additional_fields[agreement_created_date]</td>
<td>seleniumContractDateValue</td>
</tr>
<tr>
<td>echo</td>
<td>javascript{Date.parse('${seleniumContractDateValue}')}</td>
<td></td>
</tr>
I also tried using nothing or "" in the parse but neither one worked.
Can anyone help me figure out how I use a stored variable as a parameter of a JavaScript command?

1.you access variables with "storedVars['seleniumContractDateValue']" in JavaScript.
2.Selenium won't store a JavaScript date object, so you will need to parse it into a string as well.
<tr>
<td>storeValue</td>
<td>name=contract_additional_fields[agreement_created_date]</td>
<td>seleniumContractDateValue</td>
</tr>
<tr>
<td>store</td>
<td>javascript{Date.parse(storedVars['seleniumContractDateValue'])}</td>
<td>seleniumContractDateValue</td>
</tr>
<tr>
<td>echo</td>
<td>${seleniumContractDateValue}</td>
<td></td>
</tr>

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).