Dynamic Rowspan creation for HTML Table - javascript

Question: Looking for Jquery or javascript solution to create dynamic table along with Rowspan. I am facing issue to get the parent row and add the rowspan.
your help is much appreciated.
Here is my JSON format
{"nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}
Here is what I am trying to achieve
table look
HTML
<table>
<tbody>
<tr class="odd">
<td rowspan="7">All</td>
<td rowspan="6">Incident Management</td>
<td rowspan="6">Global</td>
<td rowspan="2">Bangalore</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="2">Frimley</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="2">Palo Alto</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="1">Service Availability</td>
<td rowspan="1">Global</td>
<td rowspan="1">N/A</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>

Though one.
var data = {"data":"Start","nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}
function getNodeCount(obj){
var num = 0
if(obj.nodes){
for(var i=0;i<obj.nodes.length;i++){
num += getNodeCount(obj.nodes[i])
}
}else
num = 1
return num
}
function createRowHTML(data,html){
if(html==null) html = '<tr>'
html += '<td rowspan="'+getNodeCount(data)+'">'+data.data+'</td>'
if(data.nodes){
for(var i=0;i<data.nodes.length;i++){
if(i==0)
html += createRowHTML(data.nodes[i],'')
else
html += createRowHTML(data.nodes[i])
}
}else
html += '</tr>'
return html
}
var html = createRowHTML(data)
document.getElementById('result').innerHTML = '<table>'+html+'</table>'
table td{
border: solid 1px black;
}
<div id="result"></div>

Related

Data transfer to the correct table row

so let me start from the beginning Two timers one timer is where u select when the meeting starts and one where u select the ending of the meeting, i also have a table.
first of all both timers are in another html so I used LocalStorage to get the values of the timers here on the Main html
Now the table it made from 14 rows and 3 columns
First column is with hours starting from 07:00 AM and ending at 20:00 PM
Second column will be filled with names of the meetings
And third column will be filled with the duration of the meeting
I also have a for that reads all the table column values and if it finds the same time as the time entered in the starting hour timer should add the duration of the meeting in on the third column with the id"ora",
and works fine but when it adds the meeting duration it always added on the first row !
So I need that he puts the duration of the meeting in the same row as the
Starting Hour.
Please help !
Here is the code :
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="09:00">
<td class="time">09:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="10:00">
<td class="time">10:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="11:00">
<td class="time">11:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="12:00">
<td class="time">12:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="13:00">
<td class="time">13:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="14:00">
<td class="time">14:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="15:00">
<td class="time">15:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="16:00">
<td class="time">16:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="17:00">
<td class="time">17:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="18:00">
<td class="time">18:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="19:00">
<td class="time">19:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume"></td>
<td id="ora"></td>
</table>
<script>
var y = localStorage.getItem("StartT");
var x = localStorage.getItem("DiffT")
console.log(y);
var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;
for (var i = 1; i < numRows; i ++) {
var ID = tbl.rows[i].id;
var cells = tbl.rows[i].getElementsByTagName('td');
for (var ic=0,it=cells.length;ic<it;ic++) {
if (y == cells[ic].innerHTML) {
document.getElementById("ora").innerHTML=x;
}
console.log(cells[ic].innerHTML)
}
}
This is because you are duplicating the same id everywhere.
You can select the 3rd TD per startT(y) by a single selector:
`tr[id="${y}"] td:nth-child(3)`
Try now to Run example below & enjoy a single LINE javascript!
var y= prompt('What is start time?','09:00');
document.querySelector(`tr[id="${y}"] td:nth-child(3)`).innerHTML = 'SELECTED'
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="09:00">
<td class="time">09:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="10:00">
<td class="time">10:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="11:00">
<td class="time">11:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="12:00">
<td class="time">12:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="13:00">
<td class="time">13:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="14:00">
<td class="time">14:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="15:00">
<td class="time">15:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="16:00">
<td class="time">16:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="17:00">
<td class="time">17:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="18:00">
<td class="time">18:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="19:00">
<td class="time">19:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume"></td>
<td id="ora"></td>
</table>
It seems that the reason it shows up in the first "ora" row each time is because all of your id="ora"s are the same. If you number each one they will correspond to the time and be different:
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume7"></td>
<td id="ora7"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume8"></td>
<td id="ora8"></td>
</tr>
<!-- etc. -->
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume20"></td>
<td id="ora20"></td>
</tr>
</table>
Then in your script you can add the number to each id="ora":
var y = localStorage.getItem("StartT");
var x = localStorage.getItem("DiffT")
console.log(y);
var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;
for (var i = 1; i < numRows; i ++) {
var ID = tbl.rows[i].id;
var cells = tbl.rows[i].getElementsByTagName('td');
for (var ic=0,it=cells.length;ic<it;ic++) {
if (y == cells[ic].innerHTML) {
document.getElementById("ora" + [ic+8]).innerHTML=x;
}
console.log(cells[ic].innerHTML)
}
}
The [ic + 8] adds from 0 in your loop to get the correct time slot.

Highlight highest nth values in each table row

I have the following table, I am wanting to add a class to the top 5 values in each row, only of the TD's with the class of 'championshipPoints'. After some searching and trial and error, I have managed to get the class added to the highest value, but I am struggling to get any further.
If the 6th and 7th values are the same I only want one of them highlighted.
I would like to try and solve on my own but could do with a pointer or 2 to start me off.
Thanks in advance.
HTML
<table id="2020societyChampionship">
<tbody>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player1</td>
<td class='championshipPoints'>6</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>7</td>
<td class='championshipPoints'>13</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player2</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>8</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>16</td>
<td class='championshipPoints'>22</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
</tbody>
JQ
$(document).ready(function(){
$('tbody tr').each(function() {
var $tds = $(this).find('.championshipPoints');
var values = $tds.map(function(){return parseFloat($(this).text());}).get();
$tds.eq(values.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax,
0)).addClass('highestFive');
});
});
JSFiddle
Using sort() and slice()
$('tbody tr').each(function() {
$(this).find('.championshipPoints').sort(function(a, b) {
return b.innerText - a.innerText;
}).slice(0, 5).addClass('highestFive')
});
.highestFive {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="2020societyChampionship">
<tbody>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player1</td>
<td class='championshipPoints'>6</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>7</td>
<td class='championshipPoints'>13</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player2</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>8</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>16</td>
<td class='championshipPoints'>22</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
</tbody>
</table>
You were pretty close. I've made this js fiddle
$(document).ready(function() {
$('tbody tr').each(function() {
var $tds = $(this).find('.championshipPoints');
var values = $tds.map(function() {
return parseFloat($(this).text());
}).get();
values.sort((a, b) => a - b);
console.log(values);
const highlightAbove = values[values.length - 5];
$tds.each(function() {
var val = parseFloat($(this).text());
if (val >= highlightAbove) $(this).addClass('h')
})
});
});
I get the values, sort the values, get the 5th largest number, and then iterate over the tables and highlight the ones >= the 5th largest number by adding a class.

How to get table header cell's name when am using colspan peoprty?

here I want to get the header cells name from table when am clicking on td who has specific class and colspan property, means when am clicking on td who has colspan property that should show all it's header cells name covered by it
like bellow snap
i have a code that is returning only the first header cell name the script code is as bellow
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var rowheader = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
alert("header=" + rowheader.innerHTML);
});
HTML is as bellow
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4" class="displaysingledata>row1</td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2" class="displaysingledata"></td>
<td id="1_3"></td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7" class="displaysingledata"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10" class="displaysingledata">row2</td>
<td id="2_0"></td>
<td id="2_1" class="displaysingledata"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displayMultipledata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
for a single cell the script i have included that is working,i need to deal with colspan which covers multiple header cells
You can use the colspan to define the number of headers you'll need.
Be aware that the index of the click cell. For example, in row1, there is a merged cell, this counts as one! Not two!
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan = $(this).attr('colspan'),
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
Alternativ that works on all cells
$('#example').on('click', 'td:not(:first-of-type)', function (e) {
var colspan = 1,
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
if( $(this).attr('colspan') ) {
colspan = $(this).attr('colspan');
}
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
Use $(this).attr('colspan') to find the colspan number for td and iterate loop through th cells to get th cell values. Please check below snippet for more understanding.
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan_number = parseInt($(this).attr('colspan'));
var prevCells = $(this).prevAll();
var previousColSpan = 0;
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
previousColSpan += (parseInt($(this).attr('colspan'))-1);
}
});
var total_cells = 1;
if(parseInt(colspan_number)>0){
total_cells = colspan_number;
}
var rowheaders = '';
for(var i=0;i<total_cells;i++){
rowheaders += e.delegateTarget.tHead.rows[0].cells[(this.cellIndex + previousColSpan + i)].innerHTML + "\n";
}
alert("headers : \n" + rowheaders);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>

How to apply smooth show/hide effect with slideToggle on jQuery

I am trying to do show hide content with slideToggle and it is wokign but I am not getting smooth animation effect on my table.
I have tryied with this two code but now getting proper animation effect:
$('.more').slideToggle('fast');
$('.more').stop().slideToggle(500);
Any idea how to do that?
Thanks.
Here is my jQuery code work:
$('#more').click(function () {
$(this).text('See less');
if ($('.more').is(':visible')) {
$(this).text('See more');
} else {
$(this).text('See less');
}
//$('.more').slideToggle('fast');
$('.more').stop().slideToggle(500);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
More about us
<table>
<thead>
<tr>
<th>Date</th>
<th>Address</th>
<th>Rooms</th>
<th>SQM</th>
<th>Floor</th>
<th>Parking</th>
<th class="price">Price</th>
<th>PpM</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="Date">5/12/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">1</td>
<td data-name="Parking">1</td>
<td data-name="Price">1,410,000</td>
<td data-name="PpM">40,286</td>
</tr>
<tr class="active">
<td data-name="Date">13/05/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking">1</td>
<td data-name="Price">13/05/14</td>
<td data-name="PpM">44,000</td>
</tr>
<tr class="more">
<td data-name="Date">18/08/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">6</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,600,000</td>
<td data-name="PpM">45,714</td>
</tr>
<tr class="more">
<td data-name="Date">14/09/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">4</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,375,000</td>
<td data-name="PpM">39,286</td>
</tr>
<tr class="more">
<td data-name="Date">25/01/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,680,000</td>
<td data-name="PpM">28,966</td>
</tr>
</tbody>
</table>
simply change this:
$('.more').stop().slideToggle(10);// to show effect faster use small value.
$('#more').click(function () {
$(this).text('See less');
if ($('.more').is(':visible')) {
$(this).text('See more');
} else {
$(this).text('See less');
}
//$('.more').slideToggle('fast');
$('.more').stop().slideToggle(10);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
More about us
<table>
<thead>
<tr>
<th>Date</th>
<th>Address</th>
<th>Rooms</th>
<th>SQM</th>
<th>Floor</th>
<th>Parking</th>
<th class="price">Price</th>
<th>PpM</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="Date">5/12/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">1</td>
<td data-name="Parking">1</td>
<td data-name="Price">1,410,000</td>
<td data-name="PpM">40,286</td>
</tr>
<tr class="active">
<td data-name="Date">13/05/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking">1</td>
<td data-name="Price">13/05/14</td>
<td data-name="PpM">44,000</td>
</tr>
<tr class="more">
<td data-name="Date">18/08/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">6</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,600,000</td>
<td data-name="PpM">45,714</td>
</tr>
<tr class="more">
<td data-name="Date">14/09/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">4</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,375,000</td>
<td data-name="PpM">39,286</td>
</tr>
<tr class="more">
<td data-name="Date">25/01/14</td>
<td data-name="Address">Alenby 50, Tel Aviv</td>
<td data-name="Rooms">1.5</td>
<td data-name="SQM">32</td>
<td data-name="Floor">2</td>
<td data-name="Parking"> </td>
<td data-name="Price">1,680,000</td>
<td data-name="PpM">28,966</td>
</tr>
</tbody>
</table>
The best is what you can do is make a table out of div's.
Like DevJoeri I would suggest you to use DIVs but if you don't want to or can't. Adding the folowing css rules helped on your example
tr {
float: left;
width: 100%;
}
please check this link
You cannot apply toggle animation to td,tr tag
it can be applied only on div tag

How to make a table cell input for a form

I have to submit in a form a value containing the value of a starting poker hand.
I thought to make a table with all the possible poker hands so the user can choose one from them.
This is the code I've written to create the table:
<table cellspacing="3" cellpadding="0" id="table">
<tbody>
<tr><td></td><td>A</td><td>K</td><td>Q</td><td>J</td><td>T</td><td>9</td><td>8</td><td>7</td><td>6</td><td>5</td><td>4</td><td>3</td><td>2</td></tr>
<tr class="row">
<td>A</td>
<td id="AA">AA</td>
<td id="AKs">AKs</td>
<td id="AQs">AQs</td>
<td id="AJs">AJs</td>
<td id="ATs">ATs</td>
<td id="A9s">A9s</td>
<td id="A8s">A8s</td>
<td id="A7s">A7s</td>
<td id="A6s">A6s</td>
<td id="A5s">A5s</td>
<td id="A4s">A4s</td>
<td id="A3s">A3s</td>
<td id="A2s">A2s</td>
</tr>
<tr class="row">
<td>K</td>
<td id="AKo">AKo</td>
<td id="KK">KK</td>
<td id="KQs">KQs</td>
<td id="KJs">KJs</td>
<td id="KTs">KTs</td>
<td id="K9s">K9s</td>
<td id="K8s">K8s</td>
<td id="K7s">K7s</td>
<td id="K6s">K6s</td>
<td id="K5s">K5s</td>
<td id="K4s">K4s</td>
<td id="K3s">K3s</td>
<td id="K2s">K2s</td>
</tr>
<tr class="row">
<td>Q</td>
<td id="AQo">AQo</td>
<td id="KQo">KQo</td>
<td id="QQ">QQ</td>
<td id="QJs">QJs</td>
<td id="QTs">QTs</td>
<td id="Q9s">Q9s</td>
<td id="Q8s">Q8s</td>
<td id="Q7s">Q7s</td>
<td id="Q6s">Q6s</td>
<td id="Q5s">Q5s</td>
<td id="Q4s">Q4s</td>
<td id="Q3s">Q3s</td>
<td id="Q2s">Q2s</td>
</tr>
<tr class="row">
<td>J</td>
<td id="AJo">AJo</td>
<td id="KJo">KJo</td>
<td id="QJo">QJo</td>
<td id="JJ">JJ</td>
<td id="JTs">JTs</td>
<td id="J9s">J9s</td>
<td id="J8s">J8s</td>
<td id="J7s">J7s</td>
<td id="J6s">J6s</td>
<td id="J5s">J5s</td>
<td id="J4s">J4s</td>
<td id="J3s">J3s</td>
<td id="J2s">J2s</td>
</tr>
<tr class="row">
<td>T</td>
<td id="ATo">ATo</td>
<td id="KTo">KTo</td>
<td id="QTo">QTo</td>
<td id="JTo">JTo</td>
<td id="TT">TT</td>
<td id="T9s">T9s</td>
<td id="T8s">T8s</td>
<td id="T7s">T7s</td>
<td id="T6s">T6s</td>
<td id="T5s">T5s</td>
<td id="T4s">T4s</td>
<td id="T3s">T3s</td>
<td id="T2s">T2s</td>
</tr>
<tr class="row">
<td>9</td>
<td id="A9o">A9o</td>
<td id="K9o">K9o</td>
<td id="Q9o">Q9o</td>
<td id="J9o">J9o</td>
<td id="T9o">T9o</td>
<td id="99">99</td>
<td id="98s">98s</td>
<td id="97s">97s</td>
<td id="96s">96s</td>
<td id="95s">95s</td>
<td id="94s">94s</td>
<td id="93s">93s</td>
<td id="92s">92s</td>
</tr>
<tr class="row">
<td>8</td>
<td id="A8o">A8o</td>
<td id="K8o">K8o</td>
<td id="Q8o">Q8o</td>
<td id="J8o">J8o</td>
<td id="T8o">T8o</td>
<td id="98o">98o</td>
<td id="88">88</td>
<td id="87s">87s</td>
<td id="86s">86s</td>
<td id="85s">85s</td>
<td id="84s">84s</td>
<td id="83s">83s</td>
<td id="82s">82s</td>
</tr>
<tr class="row">
<td>7</td>
<td id="A7o">A7o</td>
<td id="K7o">K7o</td>
<td id="Q7o">Q7o</td>
<td id="J7o">J7o</td>
<td id="T7o">T7o</td>
<td id="97o">97o</td>
<td id="87o">87o</td>
<td id="77">77</td>
<td id="76s">76s</td>
<td id="75s">75s</td>
<td id="74s">74s</td>
<td id="73s">73s</td>
<td id="72s">72s</td>
</tr>
<tr class="row">
<td>6</td>
<td id="A6o">A6o</td>
<td id="K6o">K6o</td>
<td id="Q6o">Q6o</td>
<td id="J6o">J6o</td>
<td id="T6o">T6o</td>
<td id="96o">96o</td>
<td id="86o">86o</td>
<td id="76o">76o</td>
<td id="66">66</td>
<td id="65s">65s</td>
<td id="64s">64s</td>
<td id="63s">63s</td>
<td id="62s">62s</td>
</tr>
<tr class="row">
<td>5</td>
<td id="A5o">A5o</td>
<td id="K5o">K5o</td>
<td id="Q5o">Q5o</td>
<td id="J5o">J5o</td>
<td id="T5o">T5o</td>
<td id="95o">95o</td>
<td id="85o">85o</td>
<td id="75o">75o</td>
<td id="65o">65o</td>
<td id="55">55</td>
<td id="54s">54s</td>
<td id="53s">53s</td>
<td id="52s">52s</td>
</tr>
<tr class="row">
<td>4</td>
<td id="A4o">A4o</td>
<td id="K4o">K4o</td>
<td id="Q4o">Q4o</td>
<td id="J4o">J4o</td>
<td id="T4o">T4o</td>
<td id="94o">94o</td>
<td id="84o">84o</td>
<td id="74o">74o</td>
<td id="64o">64o</td>
<td id="54o">54o</td>
<td id="44">44</td>
<td id="43s">43s</td>
<td id="42s">42s</td>
</tr>
<tr class="row">
<td>3</td>
<td id="A3o">A3o</td>
<td id="K3o">K3o</td>
<td id="Q3o">Q3o</td>
<td id="J3o">J3o</td>
<td id="T3o">T3o</td>
<td id="93o">93o</td>
<td id="83o">83o</td>
<td id="73o">73o</td>
<td id="63o">63o</td>
<td id="53o">53o</td>
<td id="43o">43o</td>
<td id="33">33</td>
<td id="32s">32s</td>
</tr>
<tr class="row">
<td>2</td>
<td id="A2o">A2o</td>
<td id="K2o">K2o</td>
<td id="Q2o">Q2o</td>
<td id="J2o">J2o</td>
<td id="T2o">T2o</td>
<td id="92o">92o</td>
<td id="82o">82o</td>
<td id="72o">72o</td>
<td id="62o">62o</td>
<td id="52o">52o</td>
<td id="42o">42o</td>
<td id="32o">32o</td>
<td id="22">22</td>
</tr>
</tbody></table>
</td></tr>
</table>
I'd like to allow the user to select his hand by clicking on it and then submit the value in the form. How can I achieve this?
Something like this? If you change the type of result into hidden you can submit the cards as a string.
To select a table cell you have to attach an event listener to it and keep track about what has been selected (or unselected again).
jQuery (within the $(document).ready() function, or after the table was created)
$('td').click(function(){
var hand = $(this).attr('id');
});
The number of possible poker hands is 2,598,960, so you don’t want to create a table of them. Instead, create a set of 52 items, each consisting of a check box and associated label, which identifies a card. Add JavaScript code to check that exactly 5 boxes have been selected when the form is submitted.

Categories