We Keep Coding

How to expand table rows with jquery?

Currently I have the table that is presented as the image shows with the hidden even rows. What I am looking for is that all the rows are hidden and the name of the month appears.
In the example of the image it would only have to appear November and when displaying it would have that the information for that month will appear. I am using jexpand plugin from jquery
I leave the code so that you can see how I currently have it. Any ideas?
SCRIPT
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
CSS
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(../img/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:center;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(../img/row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(../img/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
HTML
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class= "text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<?php for($i = 0; $i < count($calls); ++$i) { ?>
<tr class="text-center">
<td id="id"><?= $calls[$i]['date'] ;?></td>
<td id="database"><?= $calls[$i]['calls'] ;?></td>
<td id="total"><?= $calls[$i]['sales'] ;?></td>
<td><div class="arrow"></div></td>
</tr>
<?php } ?>
<?php endif; ?>
</tbody>
</table>

As your dates are display in dd-mm-yyyy so easy way to get month is to use split method then once we get month we need to loop through trs to hide all month expect the first one and also add odd class to it.
Then, onclick of tr just get the month from td and then loop through trs with same month add up class to that td and show same tr.
Demo code:
//when tr is clicked
$(document).on("click", "#report tr.odd", function() {
//get month
var mnth = $(this).find("td:eq(0)").text().trim().split("-")[1]
//loop thorough tr to find same month tr
$("tbody > tr").not(this).each(function() {
var mnth_other = $(this).find("td:eq(0)").text().trim().split("-")[1]
if (mnth == mnth_other) {
$(this).toggle();
$(this).find(".arrow").toggleClass("up");
}
});
});
var date_current;
//loop through tr
$("tbody > tr").each(function() {
//get month
var dates = $(this).find("td:eq(0)").text().trim().split("-")[1];
//check if not equal
if (date_current != dates) {
$(this).addClass("odd");
$(this).find(".arrow").addClass("down");
date_current = dates;
} else {
//hide other tr
$(this).hide()
}
})
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class="text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
21-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
12
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
20-12-2020
</td>
<td id="database">
222
</td>
<td id="total">
21
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
</tbody>
</table>

prevent Vertical scroll but allow Horizontal scroll

I currently have a small agenda with a dayview
when my dynamic table starts to have a lot of <td>'s, a horizontal scrollbar apears but when the user scrolls to the right, he no longer has visual on what time he's actually selecting. I've created a small example shown in the snippet.
#container{
width: 400px;
height:250px;
border:1px solid black;
overflow-x:auto;
white-space:nowrap;
position:relative;
}
table{
border:1px solid black;
border-collapse:collapse;
}
table th{
padding: 8px;
border: 1px solid #ddd;
margin:0;
display:block;
}
table td{
padding: 8px;
border: 1px solid #ddd;
min-width: 150px;
min-height: 18px;
display:inline-block;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
.secondTable{
border-left: none !important;
}
.firstTableCon{
margin-left:100px;
margin-top:50px;
position:relative;
}
.tableContainer{
display:inline-block;
}
#absoluteContainer{
/* position:absolute; */
}
#timeTable{
/* position:fixed; */
}
<div id="container">
<div class="tableContainer firstTableCon">
<div id="absoluteContainer">
<table id="timeTable">
<tr>
<th>
8:00
</th>
</tr>
<tr>
<th>
9:00
</th>
</tr>
<tr>
<th>
10:00
</th>
</tr>
<tr>
<th>
11:00
</th>
</tr>
<tr>
<th>
12:00
</th>
</tr>
<tr>
<th>
13:00
</th>
</tr>
<tr>
<th>
14:00
</th>
</tr>
<tr>
<th style="border:0px;">
15:00
</th>
</tr>
</table>
</div>
</div>
<div class="tableContainer">
<table class="secondTable">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="border:0px;">
</td>
</tr>
</table>
</div>
</div>
I'd like the table that shows what time you're selecting (a vertical table) to scroll with the screen to the right, but maintain position when scrolling up or down.
preferable a css solution but if Javascript is the only option I'd be forced to use that.
Before this gets flagged as duplicate, I've seen the other question Here and tried the fiddles BUT they did not work in the way I wanted

In this case, you may need to use position: sticky with left: 0 on .firstTableCon:
#container{
width: 400px;
height:250px;
border:1px solid black;
overflow-x:auto;
white-space:nowrap;
position:relative;
}
table{
border:1px solid black;
border-collapse:collapse;
}
table th{
padding: 8px;
border: 1px solid #ddd;
margin:0;
display:block;
}
table td{
padding: 8px;
border: 1px solid #ddd;
min-width: 150px;
min-height: 18px;
display:inline-block;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
.secondTable{
border-left: none !important;
}
.firstTableCon{
margin-left:100px;
margin-top:50px;
position: -webkit-sticky;
position: sticky;
left: 0;
}
.tableContainer{
display:inline-block;
}
#absoluteContainer{
/* position:absolute; */
}
#timeTable{
/* position:fixed; */
}
<div id="container">
<div class="tableContainer firstTableCon">
<div id="absoluteContainer">
<table id="timeTable">
<tr>
<th>
8:00
</th>
</tr>
<tr>
<th>
9:00
</th>
</tr>
<tr>
<th>
10:00
</th>
</tr>
<tr>
<th>
11:00
</th>
</tr>
<tr>
<th>
12:00
</th>
</tr>
<tr>
<th>
13:00
</th>
</tr>
<tr>
<th>
14:00
</th>
</tr>
<tr>
<th style="border:0px;">
15:00
</th>
</tr>
</table>
</div>
</div>
<div class="tableContainer">
<table class="secondTable">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="border:0px;">
</td>
</tr>
</table>
</div>
</div>

You can add overflow-y:hidden; in container
#container{
width: 400px;
height:250px;
border:1px solid black;
overflow-x:auto;
white-space:nowrap;
position:relative;
overflow-y:hidden;
}
table{
border:1px solid black;
border-collapse:collapse;
}
table th{
padding: 8px;
border: 1px solid #ddd;
margin:0;
display:block;
}
table td{
padding: 8px;
border: 1px solid #ddd;
min-width: 150px;
min-height: 18px;
display:inline-block;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
.secondTable{
border-left: none !important;
}
.firstTableCon{
margin-left:100px;
margin-top:50px;
position:relative;
}
.tableContainer{
display:inline-block;
}
#absoluteContainer{
/* position:absolute; */
}
#timeTable{
/* position:fixed; */
}
<div id="container">
<div class="tableContainer firstTableCon">
<div id="absoluteContainer">
<table id="timeTable">
<tr>
<th>
8:00
</th>
</tr>
<tr>
<th>
9:00
</th>
</tr>
<tr>
<th>
10:00
</th>
</tr>
<tr>
<th>
11:00
</th>
</tr>
<tr>
<th>
12:00
</th>
</tr>
<tr>
<th>
13:00
</th>
</tr>
<tr>
<th>
14:00
</th>
</tr>
<tr>
<th style="border:0px;">
15:00
</th>
</tr>
</table>
</div>
</div>
<div class="tableContainer">
<table class="secondTable">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="border:0px;">
</td>
</tr>
</table>
</div>
</div>

Export html table to word that have tinymce on one column

I have a HTML view and want to export the content of table which has tinymce on it to Microsoft word or even Microsoft Excel.
but when I export it to word I get textarea in word file instead of just text of column.
Thanks in Advance.
My word file:
My HTML view:
function export2Word(element) {
var html, link, blob, url, css;
css = (
'<style>' +
'#page WordSection1{size: 21cm 29.7cm;}' +
'div.WordSection1 {page: WordSection1;}' +
'</style>'
);
html = element.innerHTML;
blob = new Blob(['\ufeff', css + html], {
type: 'application/msword'
});
url = URL.createObjectURL(blob);
link = document.createElement('A');
link.href = url;
link.download = 'Document'; // default name without extension
document.body.appendChild(link);
if (navigator.msSaveOrOpenBlob) navigator.msSaveOrOpenBlob(blob, 'Document.doc'); // IE10-11
else link.click(); // other browsers
document.body.removeChild(link);
};
<body dir="rtl">
<button onclick="export2Word(window.docx)">Export</button>
<br>
<div id="docx">
<div class="WordSection1" dir="rtl">
<table width="95%" border="1" align="center" style="text-align: center" id="testtable">
<thead>
<tr>
<td colspan="2" style="width: 10%">شهرت دریور</td>
<td rowspan="2" style="width: 10%">نوع واسطه</td>
<td rowspan="2" style="width: 10%">نمبر پلیت</td>
<td rowspan="2" style="width: 10%">نمبر پارچه عوارض</td>
<td rowspan="2" style="width: 25%;height: 90%">تثبیت عوارض</td>
<td rowspan="2" style="width: 10%">تاریخ تثبیت</td>
<td rowspan="2">شماره حکم</td>
<td rowspan="2">شماره صادر</td>
<td rowspan="2">پرزه جات خریداری شده</td>
<td rowspan="2">تعداد</td>
<td rowspan="2">قیمت فی واحد</td>
<td rowspan="2" style="text-wrap:inherit">قیمت عمومی</td>
<td rowspan="2">تاریخ</td>
<td rowspan="2">ملاحظات</td>
</tr>
<tr>
<td>اسم</td>
<td>ولد</td>
</tr>
</thead>
<tbody>
#foreach($result as $a=>$row)
<tr>
<td id="">{{$row->driver_name}}</td>
<td id="">{{$row->father_name}}</td>
<td id="">{{$row->vehicle_type}}</td>
<td id="">{{$row->plate_no}}</td>
<td id="">{{$row->serial_number}}</td>
<td><textarea class="checkkkkk" id="ddd{{$bbb}}">{{$row->description}}</textarea>
</td>
<td id="asdf{{$aaa}}">
<script type="text/javascript">
$(document).ready(function() {
$("#asdf" + {
{
$aaa
}
} + "").text(moment("{{$row->created_at}}").format('jYYYY/jM/jD'));
});
</script>
{{$aaa++}}
</td>
<td id="">{{$row->order_number}}</td>
<td id="">{{$row->export_number}}</td>
<td>{{$row->buy_parts}}</td>
<td id="">{{$row->quantity}}</td>
<td id="">{{$row->per_item_price}}</td>
<td id="">{{$row->total_price}}</td>
<td id="">{{$row->export_date}}</td>
<td id="">{{$row->remarks}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</body>
or is there any javascript library that can do that even with tinymce

Follow this instruction for export Doc with Excel file
http://localhost/tableToDoc.php?rType=1&fName=test
-Copy this code and see
- First of all create the table by Microsoft office then go to 'Preview in Web Browser' then Ctrl+u. Copy this source code and past your html page. you can change this source code.
<!DOCTYPE html>
<html lang="bn">
<?php
$repFor = $_GET['rType'];
$fileName = $_GET['fName'];
header("Content-type: application/vnd.ms-word");
if($repFor == '1'){ // 2 = Export excel file
header("Content-Disposition: attachment;Filename=".$fileName.".xls");
}
if($repFor == '2'){ // 3 = Export word file
header("Content-Disposition: attachment;Filename=".$fileName.".doc");
}
echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows-1252\">";
?>
<head>
<title>HTML Table to xls and doc file export</title>
<style type="text/css">
#page {
size: landscape;
}
.tblBorder{
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: none;
padding-top: 0.04in;
padding-bottom: 0.04in;
padding-left: 0.04in;
padding-right: 0in
}
.tblBorder2{
border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0in
}
</style>
</head>
<body lang="en-US" dir="ltr">
<table width="100%" cellpadding="4" cellspacing="0">
<tr valign="top">
<td rowspan="2" width="17%" class="tblBorder">
<p align="center">Name</p>
</td>
<td rowspan="2" width="17%" class="tblBorder">
<p align="center">Website</p>
</td>
<td rowspan="2" width="17%" class="tblBorder">
<p align="center">Sub-Table</p>
</td>
<td rowspan="2" width="17%" class="tblBorder">
<p align="center">Subject</p>
</td>
<td colspan="2" width="33%" style="border: 1px solid #000000; padding: 0.04in">
<p align="center">Group</p>
</td>
</tr>
<tr valign="top">
<td width="17%" class="tblBorder2">
<p align="center">Science</p>
</td>
<td width="17%" style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0.04in">
<p align="center">Arts</p>
</td>
</tr>
<tr valign="top">
<td width="17%" class="tblBorder2">
Bulbul
</td>
<td width="17%" class="tblBorder2">
bdprescription.com
</td>
<td width="17%" class="tblBorder2">
<div>
<table width="100%">
<tr>
<td class="tblBorder">Sub-Table</td>
<td class="tblBorder">Sub-Table</td>
</tr>
<tr>
<td class="tblBorder">Sub-Table</td>
<td class="tblBorder">Sub-Table</td>
</tr>
</table>
</div>
</td>
<td width="17%" class="tblBorder2">
Match
</td>
<td width="17%" class="tblBorder2">
Yes
</td>
<td width="17%" style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0.04in">
No
</td>
</tr>
</table>
</body>
</html>

you can use direction:rtl to the table and it will fix that inverse for you
css =
"<style>" +
"#page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: landscape;}" +
"div.WordSection1 {page: WordSection1; dir:rtl }" +
" table {border-collapse: collapse;width: 100%;direction:rtl;}" +
"</style>";

Randomly assign different names to each Table Cell

So I have a program which randomly assigns a name to each cell in the first row of my table from a list of names in a text box with the click of a button, what I want to do is assign different names to each of the cells in the textbox in the click of a button so that no two cells have the same name, here is my code so far:
var rnd = function() {
var things;
things = document.getElementById('things').value;
things = things.replace(', ', ',');
things = things.split(',');
setTimeout(function() {
var list = document.querySelectorAll('.js-result');
for (var index = 0; index < list.length; index++) {
var thing = Math.floor(Math.random() * things.length);
list.item(index).innerHTML = things[thing];
}
}, 500);
};
fieldset input {
display: block;
}
.result {
border: solid 1px black;
background: #e0e0e0;
padding: 1em;
margin: 1em 0;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form method="get" action="/" onsubmit="return false;">
<fieldset>
<label>
<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
</label>
</fieldset>
<p>
<input type="button" value="Pick one!" onclick="rnd();">
</p>
</form>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
</tr>
</tbody>
</table>

Instead of accessing the array element you can very well mutate it using things.splice(thing,1) - see demo below:
var rnd = function() {
var things;
things = document.getElementById('things').value;
things = things.replace(', ', ',');
things = things.split(',');
setTimeout(function() {
var list = document.querySelectorAll('.js-result');
for (var index = 0; index < list.length; index++) {
var thing = Math.floor(Math.random() * things.length);
list.item(index).innerHTML = things.splice(thing,1);
}
}, 500);
};
fieldset input {
display: block;
}
.result {
border: solid 1px black;
background: #e0e0e0;
padding: 1em;
margin: 1em 0;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form method="get" action="/" onsubmit="return false;">
<fieldset>
<label>
<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
</label>
</fieldset>
<p>
<input type="button" value="Pick one!" onclick="rnd();">
</p>
</form>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
<td>
<div class="js-result result"></div>
</td>
</tr>
</tbody>
</table>

One way to do this is using the unique things array. This can be done by using the filter function on the array and passing in a predicate which checks for the uniqueness.
let uniqueThings = things.filter((currentValue, index, array) => array.indexOf(currentValue) === index); ;
list.item(index).innerHTML = uniqueThings[index];
Complete Code:
var rnd = function () {
var things;
things = document.getElementById('things').value;
things = things.replace(', ', ',');
things = things.split(',');
setTimeout(function () {
var list = document.querySelectorAll('.js-result');
for (var index = 0; index < list.length; index++) {
var thing = Math.floor(Math.random() * things.length);
let uniqueThings = things.filter((currentValue, index, array) => array.indexOf(currentValue) === index); ;
list.item(index).innerHTML = uniqueThings[index];
}
}, 500);
};
margin: 1em 0;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table align="center">
<thead>
<tr>
<th></th>
<th>Black</th>
<th>Blue</th>
<th>B & B</th>
<th>Gold</th>
<th>Green</th>
<th>Gryphons</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form method="get" action="/" onsubmit="return false;">
<fieldset>
<label>
<textarea style="width: 400px;height: 35px;" name="things" id="things">Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham</textarea>
</label>
</fieldset>
<p>
<input type="button" value="Pick one!" onclick="rnd();">
</p>
</form>
</td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
<td><div class="js-result result"></div></td>
</tr>
</tbody>
</table>

jQuery TD resize event?

What do I do if I want to know when a <td>'s size changes?
table code:
<style>
#BA1{
border:1px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
}
#BA1 th {
border:1px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
#BA1 td {
border:1px solid #C0C0C0;
padding:5px;
}
</style>
<table id="BA1"> <caption> </caption> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> <tbody> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> dfdfdfdfdfdf</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table>
How can i listen this event?
I have tried these methods:
var x = 0;
$("td").resize(function(){
var txt = x += 1;
});
//planB
$("td").addEventListener("resize", myFunction);
var x = 0;
function myFunction() {
var txt = x += 1;
}
But this code is not working
How can i fix this?