Develop Reference

Get table cell value based on the first cell content

I have a page with multiple dynamic tables , one of the table looks like the below structure
Col1 Col2 Col3
1 One Two
2 b 15/12/2017
3 a X
2 W 10/12/2014
HTML
<table id="table1">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr> <td>1</td>
<td>b</td>
<td>15/12/2017</td>
</tr>
<tr> <td>2</td>
<td>b</td>
<td>15/10/2017</td>
</tr>
<tr> <td>3</td>
<td>b</td>
<td>15/09/2017</td>
</tr>
</tbody>
</table>
I would like to know How can I get the cell in col3 with header name based on the value at col1?
EX:
I want to find the table by ID and check its first cell for each row, if it equal 2 then get the cell value of col 3 in the same row !
Any help would be fully appreciated

You can try something with jquery like below snippet.
Update: you can get particular column by table header as well using $('th:contains("col3")').index()
$(document).ready(function() {
$('#myTable').find('tbody td:first-child').each(function() {
if ($(this).text() == '2') {
console.log($(this).closest('tr').find('td').eq($('th:contains("col3")').index()).text());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>one</td>
<td>ONE</td>
</tr>
<tr>
<td>2</td>
<td>two</td>
<td>TWO</td>
</tr>
<tr>
<td>3</td>
<td>three</td>
<td>THREE</td>
</tr>
</tbody>
</table>

With jQuery it's quite easy; if you've found the cell, get the row, and the third cell in that row;
$('td') // Select all cells
.filter(function() { // Filter the cells
return $(this).text() == '2';
})
.closest('tr') // get the table row
.find('td') // select all cells in that row
.eq(2) // select the third cell (0-based index)
.text(); // this will output '15/12/2017'
edit I'm in a good mood today, check this little demo; https://jsfiddle.net/a32knb81/. Just input your search key in the input field an you'll get the value of the third column in that same row.

How to disable </td> selection with specific class with js/css?

I have my Calendar constructed with html table, where few of the dates can only be selectable. So i need to disable all the other data.
Function that highlights the td :
/* Get all rows from your 'table' but not the first one
* that includes headers. */
var rows = $('td').not(':first');
/* Create 'click' event handler for rows */
rows.on('click', function (e) {
/* Get current row */
var row = $(this);
/* Check if 'Ctrl', 'cmd' or 'Shift' keyboard key was pressed
* 'Ctrl' => is represented by 'e.ctrlKey' or 'e.metaKey'
* 'Shift' => is represented by 'e.shiftKey' */
if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
/* If pressed highlight the other row that was clicked */
row.addClass('highlight');
} else {
/* Otherwise just highlight one row and clean others */
rows.removeClass('highlight');
row.addClass('highlight');
}
});
Now suppose my table looks like below :
<table>
<th class='weekday'>Mon</th><th class='weekday'>Tue</th><th class='weekday'>Wed</th>
<tr class='selectable'> 1</tr>
<tr class='selectable'> 2</tr>
<tr class='unselectable'> 3</tr>
</table>
So now how to disable the tr, with unselectable calss using js/css?

First you have to validate your HTML code by adding <td> tags inside the <tr> instead of adding the text directly to the row and adding the <th> tags inside the <tr> :
<table>
<tr>
<th class='weekday'>Mon</th>
<th class='weekday'>Tue</th>
<th class='weekday'>Wed</th>
</tr>
<tr class='selectable'>
<td>1</td>
</tr>
<tr class='selectable'>
<td>2</td>
</tr>
<tr class='unselectable'>
<td>3</td>
</tr>
</table>
I'm not sure what you mean by disable tr since the disable attribute work just for <input> tag.
You could add class called unselectable for example and add the css you want to use for "disabled tr", check example bellow :
.unselectable{
background-color: #ddd;
cursor: not-allowed;
}
Hope this helps.
.unselectable{
background-color: #ddd;
cursor: not-allowed;
}
<table border='1'>
<tr>
<th class='weekday'>Mon</th>
<th class='weekday'>Tue</th>
<th class='weekday'>Wed</th>
</tr>
<tr class='selectable'>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class='selectable'>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class='unselectable'>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>

$('.unselectable').prop("disabled",true)
This will disable the <tr> elements with class unselectable.

Just change your selection on your event
var rows = $('td .selectable');

var rows = $('tr .selectable').not(':first');
use the above line to get rows with class name 'selectable'. Also add <td> tags inside your <tr> </tr> row tags to add contents.

you can use it and write your condition instead of below condition text =>
<td [style.cursor]="condition ? 'not-allowed':'pointer' ">

jquery tablesorter usage without tbody and th block

I am very much interested to know how to use jquery tablesorter without tbody and th block, the reason behind this is I have many tables and css working which I generated from http://www.csstablegenerator.com/ site, in which only tr and td blocks only used
This is working table with tbody block Working default table style fiddle
But I want to sort table with only tr and td blocks Expected Fiddle
This is my test table which I want to sort
<table border='1' id='test' >
<!-- this is my header -->
<tr>
<td>AlphaNumeric</td>
<td>Numeric</td>
<td>Animals</td>
<td>Sites</td>
</tr>
<tr>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
</table>

Assuming you don't want to manually deal with the HTML of the table, so I would get jquery to do it for you:
var header = $("#test tr:first").html();
$("#test tr:first").remove();
$("#test").prepend('<thead>' + header + '</thead>');
$('#test').tablesorter();

Moving data values in a table onclick

Ok, I have a table and I need to move data in the cells over one cell. For instance in the following table I need the data in cells to move one, as in...cell 6 to move to cell 9 and cell 9 to move to cell 8 8 to cell 7 and so on. So only the outside cells move. Cell number 5 stays still. This all happens onclick of a button. How can this be done? Maybe an array?
HTML
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr><tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<button id="moveStuff">Move!</button>

Here I move the cell value using the button as you need.
FiddleDemo:Demo
Script:
$(document).ready(function () {
$("#moveRow").click(function () {
var MyRows = document.getElementById("cellMove");
var ninecell = MyRows.rows[2].cells[2].innerHTML;
MyRows.rows[2].cells[2].innerHTML=MyRows.rows[1].cells[2].innerHTML;
MyRows.rows[2].cells[1].innerHTML = ninecell;
});
});

How to include rowspan and colspan dynamically inside <td> tag based on some conditions

I know I can include <td colspan=10> statically when I want to merge the columns, but if I need to check some conditions and based on that only I need to merge then how this could be done?
My idea was like this:
var span="";
if(some condition)
span="colspan=10";
and then setting this variable inside <td> as:
<td +span+>
but it doesn't work like that… Any suggestion how to do this?

<table id="table" border=2>
<tr id="row1">
<td id="tableCellID">foo</td><td></td>
</tr>
<tr>
<td>foo</td><td>foo</td>
</tr>
</table>
<button onclick="button();" text="Change"/>
<script language="javascript">
var i = 0;
function button(){
var td = document.getElementById("tableCellID");
if(i==0){
td.setAttribute("colspan", 2);
i=1;
}else{
td.setAttribute("colspan", 1);
i=0;
}
}
</script>
This is how you can dynamically set the attribute colspan. You will see that changing the colspan of one cell will effect the layout of the entire table. You will need to deal with each cell in the row.

var span='';
var table='';
if(some condition)
span="colspan=10";
var table="<tr><td"+span+"></td></tr>":

One way to do is, if you able to set an id in your td
<td id="foo">
in your javascript, you can add attributes like this,
document.getElementById("foo").colSpan="10";

document.querySelector("tr.total td").style.backgroundColor = "#ccc";
document.querySelector("tr.grand td:nth-child(1)").colSpan="2";
document.querySelector("tr.grand td:nth-child(2)").remove();
table, table td {border:1px solid #ccc; padding:5px 10px; border-spacing:0px;}
.grand{font-weight:bold;}
<table>
<tr>
<td>Column</td>
<td>Value</td>
</tr>
<tr class="total">
<td>Sub Cost</td>
<td>$500</td>
</tr>
<tr class="grand">
<td>Amount $1000</td>
<td>Remove Me</td>
</tr>
</table>