Here is my jsFiddle
HTML:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th class="col1">Seminar Name</th>
<th class="col2">Seminar Date</th>
<th class="col3">Download Link</th>
<tbody>
<tr class="del">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
<tr class="del" id="tablerow">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
</tbody>
<button class="addnewrow">Add New Row</button>
Javascript:
$('#tableone').on('click', '.editbtn', function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $("#tableone").find("tr:last");
var $clone = $tr.clone();
$clone.find('input').val('');
$tr.after($clone);
});
the code works fine in jfiddle but when I go to
https://jsfiddle.net/yT92K/42/show/result
the "add new row" function has stopped working.
Also, when I try to export the file as an individual .html file, it just opens a blank page in my browser (chrome). Does anyone have a fix for this?
$('#tableone').on('click', '.editbtn', function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $("#tableone").find("tr:last");
var $clone = $tr.clone();
$clone.find('input').val('');
$tr.after($clone);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th class="col1">Seminar Name</th>
<th class="col2">Seminar Date</th>
<th class="col3">Download Link</th>
</thead>
<tbody>
<tr class="del">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
<tr class="del" id="tablerow">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
</tbody>
<button class="addnewrow">Add New Row</button>
This is an addition to #zhuravlyoy's answer, since his answer won't make the new row blank if the previous one was edited.
$( document ).ready(function() {
$('#tableone').on('click', '.editbtn', function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $("#tableone").find("tr:last");
var $clone = $tr.clone();
$clone.children('.td').empty();
$clone.children('.td').attr('contenteditable', false);
$clone.find('.editbtn').text('Edit');
$tr.after($clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th class="col1">Seminar Name</th>
<th class="col2">Seminar Date</th>
<th class="col3">Download Link</th>
<tbody>
<tr class="del">
<td contenteditable="false" class="td"></td>
<td contenteditable="false" class="td"></td>
<td contenteditable="false" class="td"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
<tr class="del" id="tablerow">
<td contenteditable="false" class="td"></td>
<td contenteditable="false" class="td"></td>
<td contenteditable="false" class="td"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
</tbody>
<button class="addnewrow">Add New Row</button>
$( document ).ready(function() {
$('#tableone').on('click', '.editbtn', function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $("#tableone").find("tr:last");
var $clone = $tr.clone();
$clone.find('input').val('');
$clone.find('td:not(:last)').empty();
$clone.find('td:not(:last)').prop('contenteditable', false);
$clone.find('button').html('Edit');
$tr.after($clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableone" border="2" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th class="col1">Seminar Name</th>
<th class="col2">Seminar Date</th>
<th class="col3">Download Link</th>
<tbody>
<tr class="del">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
<tr class="del" id="tablerow">
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td contenteditable="false"></td>
<td>
<button class="editbtn">Edit</button>
</td>
</tr>
</tbody>
<button class="addnewrow">Add New Row</button>
Try this!
Related
When I delete product into basket, products deleted successfully but company name does not delete. I'm using javascript. i cant solve the problem, help me pls...
function getCurrentRow(t) {
var v = parseInt($.trim(t.attr("data-row-id")));
if (isNaN(v)) {
console.log("data-row-id:null");
return null;
}
var currentRow = getRow(v);
if (currentRow == null) {
console.log("currentRow:null");
return null;
}
return currentRow;
}
// Delete
basketContainer.on('click', 'button[data-button-name="delete"]', function() {
var o = $(this);
var t = o.closest("tr");
var currentRow = getCurrentRow(t);
if (currentRow == null) {
return;
}
postData(t, currentRow.index, {
"basketid": currentRow.id,
"pdoductid": currentRow.ProductID,
"count": 0,
"cmdtype": cmdTypes.Delete
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<thead>
<tr data-row-id="item.id">
<td colspan="4" style="color: #d53434">Shop: <strong>Shop name</strong></td>
</tr>
</thead>
<tbody>
<tr role="row" data-row-id="item2.id">
...
</tr>
</tbody>
</table>
You mean remove the table when no more products from that shop?
$("#basketContainer").on('click', 'button[data-button-name="delete"]', function() {
const $tr = $(this).closest("tr");
const $tb = $(this).closest("tbody");
$tr.remove()
if ($tb.find("tr").length === 0) $tb.closest("table").remove()
});
table {
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="basketContainer">
<table>
<thead>
<tr data-row-id="item.id">
<td colspan="4" style="color: #d53434">Shop: <strong>Shop name 1</strong></td>
</tr>
</thead>
<tbody>
<tr role="row" data-row-id="item2.id">
<td><button type="button" data-button-name="delete">Delete</button></td>
</tr>
<tr role="row" data-row-id="item2.id">
<td><button type="button" data-button-name="delete">Delete</button></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr data-row-id="item.id">
<td colspan="4" style="color: #d53434">Shop: <strong>Shop name 2</strong></td>
</tr>
</thead>
<tbody>
<tr role="row" data-row-id="item2.id">
<td><button type="button" data-button-name="delete">Delete</button></td>
</tr>
<tr role="row" data-row-id="item2.id">
<td><button type="button" data-button-name="delete">Delete</button></td>
</tr>
</tbody>
</table>
</div>
A record with new and old price value,
if new price is different to old one, and highlight the record.
I want to use "setTimeout" function,and the highlight effects will disappear after 10s. How can I highlight the table rows base on values?
I use the jQuery-UI framework.
$(function(){
setTimeout(change(), 3000);
});
function change(){
$(".table-striped").find("tr").each(function () {
$("td").filter(function() {
return $(this).text().indexOf("200") != -1;
}).parent().toggleClass("highlight",5000).removeClass("highlight");
});
}
<table class="table table-striped">
<thead>
<tr>
<th>New Price</th>
<th>Old Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
<td>1000</td>
</tr>
<tr>
<td>1000</td>
<td>1000</td>
</tr>
</tbody>
</table>
.highlight {
background: red !important;
color: green !important;
}
I have solved your issue with jquery please check my answer.
$(document).ready(function(){
$('tbody tr').each(function( i, val){
var nprice = $(this).children('.new_price').html();
var oprice = $(this).children('.old_price').html();
if(nprice != oprice){
$(this).addClass('divtoBlink');
//$(this).children('td').css('background-color','red');
}
});
setInterval(function () {
$(".divtoBlink").css("background-color", function () {
this.switch = !this.switch
return this.switch ? "red" : ""
});
}, 100);
setInterval(function () {
$('tr').removeClass('divtoBlink').css('background-color','white');
}, 5000)
});
.divtoBlink {
width:100px;
height:20px;
background-color:#627BAE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th class="text-center">Id#</th>
<th>Session Eamil</th>
<th>Login Url</th>
<th>Date</th>
<th>Status</th>
<th>New Price</th>
<th>Old Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">#counter11</td>
<td>#item.SessionEmail11</td>
<td>#item.LoginUrl11</td>
<td>#item.CreatedAt11</td>
<td>Failed11</td>
<td class="new_price">200</td>
<td class="old_price">1000</td>
</tr>
<tr>
<td class="text-center">#counter12</td>
<td>#item.SessionEmail12</td>
<td>#item.LoginUrl12</td>
<td>#item.CreatedAt12</td>
<td>Failed12</td>
<td class="new_price">1000</td>
<td class="old_price">1000</td>
</tr>
</tbody>
</table>
Is this what you are looking for? I made it highlight using jquery ui's "highlight" effect with a timeout of 10 seconds as you wished.
Code below :
$(function(){
var elementToHighlight = '';
$(".table-striped tbody tr").each(function(i, el) {
if ($(el).children(':first').html() != $(el).children(':last').html()) {
if (i == $(".table-striped tbody tr").length - 1) {
elementToHighlight += '.table-striped tbody > :eq(' + $(el).children(':first').parent().index() + ')';
} else {
elementToHighlight += '.table-striped tbody > :eq(' + $(el).children(':first').parent().index() + '), ';
}
}
});
if (elementToHighlight.substr(-2) == ', ') {
elementToHighlight = elementToHighlight.substr(0, elementToHighlight.length-2)
}
var blink = setInterval(function(){
$(elementToHighlight).effect('highlight', {color: 'red'}, 1000);
}, 1000);
setTimeout(function() {
clearInterval(blink);
}, 10000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>New Price</th>
<th>Old Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
<td>1000</td>
</tr>
<tr>
<td>1000</td>
<td>1000</td>
</tr>
<tr>
<td>400</td>
<td>1000</td>
</tr>
<tr>
<td>500</td>
<td>500</td>
</tr>
<tr>
<td>700</td>
<td>700</td>
</tr>
<tr>
<td>200</td>
<td>900</td>
</tr>
</tbody>
</table>
This is my fiddle: https://jsfiddle.net/qpouvped/2/
What I want to do is display the header with the corresponding alphabetical letter of the searched name. But I had no success!
If you see the code and look for "Nanana", I want to display this line, and the gray header C, of which "Nanana" belongs.
Can anyone help me with this?
My HTML:
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td >137418</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">C</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr>
<td >133</td>
<td >Nanana Nonono Nonono</td>
<td >11225566</td>
</tr>
</tbody>
</table>
My jQuery:
$(".filter-nome").keyup(function(){
var value = $(this).val();
$(".lista-certidoes tbody tr").each(function(index){
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(value) != 0) {
$(this).hide();
} else {
$(this).show();
//$(this).parent('tbody').next('td.cab_interno').show();
}
});
});
The alphabetic heading is a previous sibling of the closest tr, so you want to use .prevAll(). These are returned in order of distance from the current row, so the first one will be the heading for that group.
You also shouldn't process the heading rows in the .each() loop. Just hide everything first, and show the data rows that match, along with their headings.
$(".filter-nome").keyup(function() {
var value = $(this).val();
if (value == "") {
// Show everything when filter is empty
$(".lista-certidoes tbody tr").show();
return;
}
$(".lista-certidoes tbody tr").hide();
$(".lista-certidoes tbody tr:not(.subtitulo)").each(function(index) {
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(value) == 0) {
$row.show();
$row.closest("tr").prevAll(".subtitulo").first().show();
}
});
});
.lista-certidoes {
.cab_interno {
background-color: #333;
color: #fff;
text-align: center;
padding: 8px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td>137418</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td>122222</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">C</td>
</tr>
<tr>
<td>122222</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr>
<td>133</td>
<td>Nanana Nonono Nonono</td>
<td>11225566</td>
</tr>
</tbody>
</table>
I have a table, there is a toggle feature that uses accordion collapse rows. I have a search function in javascript, but when you search text and that text is not in the hidden rows the toggle doesn't work. It won't display the hidden rows unless there is the search text. Please help!
i need it to do this but with javascript not ajax... http://www.cscc.edu/_resources/app-data/datatables/examples/api/row_details.html
My table has two hidden tables, each with a header, within it...
i can id the tr's of the collapsible rows.
So for each row in the table, there are two tables that expand when user select toggler. Two headers will display even if no rows.
Below is javscript for the search functionality that i need to have not search on the collapsible tables
<script type="text/javascript">
$(document).ready(function () {
$(".search").keyup(function () {
var searchTerm = $(".search").val();
var listItem = $('.results tbody').children('tr');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
$.extend($.expr[':'], {
'containsi': function (elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function (e) {
$(this).attr('visible', 'false');
});
$(".results tbody tr:containsi('" + searchSplit + "')").each(function (e) {
$(this).attr('visible', 'true');
});
var jobCount = $('.results tbody tr[visible="true"]').length;
$('.counter').text(jobCount + ' item');
if (jobCount == '0') { $('.no-result').show(); }
else { $('.no-result').hide(); }
});
});
</script>
html...
<div class="form-group pull-right">
<input type="text" class="search form-control" placeholder="What you looking for?" id="search">
</div>
<span class="counter pull-right"></span>
<table class="table table-hover table-bordered results" id="table">
<thead>
<tr>
<th> </th>
<th>Obj ID</th>
<th>Obj</th>
<th>Init ID</th>
<th>Init</th>
</tr>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo_1" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td scope="row">1</td>
<td>Obj 1</td>
<td scope="row">1</td>
<td>Task 1</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="demo_1">
<table class="table table-striped">
<thead>
<tr style="background-color: darkgrey" id="header_1">
<th>Update ID</th>
<th>Stop Light</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr style="background-color: lightgrey" id="update_1">
<th scope="row">1</th>
<td>Notes for Update 1</td>
<td>Other Notes for Update 1</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<table class="table table-striped">
<thead>
<tr style="background-color: darkgrey" id="header_2" >
<th>Target Quarter</th>
<th>Added By</th>
<th>Added On</th>
</tr>
</thead>
<tbody>
<tr style="background-color: lightgrey" id="target_1">
<th scope="row">1</th>
<td>User 1</td>
<td>1/1/2017</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
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>