Develop Reference

Function name is not defined at HTMLTableCellElement.onclick

I want to make X and O game , So the first function i did it has loop and condition that when i click on any cell(td) in the table and if all cells in the table are empty wrote X in the cell which I clicked it , but I have here 2 problem ,
First one The console wrote (Sample1.html:53 Uncaught SyntaxError: Unexpected token '<') it refers to for loop, so I don't know what is the problem there.
the second problem console wrote also that my function name is not define , although the function name is correct so can anyone help me.
the JS codes is
<script >
/*var lastGame;*/
var TR=0;
var table = document.getElementById('tb');
function CheckAllEmpty(idClicked){
for(var x=0, x < table.rows.length; x++){
if(!table.rows[x])
{
TR++;
}
else{}
}
if(TR==9)
{
document.getElementById(idClicked).innerHTML="X";
}
else {}
}
</script>
And the HTML :
<table id="tb">
<tr>
<td id="td1" onclick="CheckAllEmpty(this.id);"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
<tr>
<td id="td4"></td>
<td id="td5"></td>
<td id="td6"></td>
</tr>
<tr>
<td id="td7"></td>
<td id="td8"></td>
<td id="td9"></td>
</tr>
</table>

There seems to be other problems with your code, but your two specific problems should be fixed. Also I don't see why you need to check if every cell is empty, but then again I can't see the rest of your code. Feel free to ask any questions in the comments.
var TR = 0;
var table = document.getElementById('tb');
function CheckAllEmpty(idClicked) {
for (var x = 0; x < table.rows.length; x++) {
if (!(table.rows[x].value == "")) {
TR++;
console.log(TR);
}
}
if (TR == 3) {
document.getElementById(idClicked).innerHTML = "X";
}
}
CheckAllEmpty('td1');
<table id="tb">
<tr>
<td id="td1" onclick="CheckAllEmpty(this.id)"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
<tr>
<td id="td4"></td>
<td id="td5"></td>
<td id="td6"></td>
</tr>
<tr>
<td id="td7"></td>
<td id="td8"></td>
<td id="td9"></td>
</tr>
</table>

Jquery parse HTML Table

I have the following table:
<table id="tableData" name="tableData">
<tr>
<td class="tdvalue"><a class="XXX">10</a></td>
<td class="tdvalue"><a class="YYY">4</a></td>
<td class="tdvalue"><a class="XXX">7</a></td>
</tr>
</table>
I need to get the td value which has hyperlink with class name in an array
The following code is not working
var rows = [];
$("#tableData tr").each(function() {
$tr = $(this);
var row = [];
$tr.find(".tdvalue").each(function(){
row.push($(this).text());
});
});
This gives the value of the text with in the td.
but I need to class name of XXX <a class="XXX">10</a>
result would be:
Array[3] 0:"XXX" 1:"YYY" 2:"XXX"
Please help anyone

target the a's directly:
var row = [];
$(".tdvalue a").each(function() {
row.push($(this).attr('class'));
});
//gives row= ["XXX","YYY","XXX"]
var row = [];
$(".tdvalue a").each(function() {
row.push($(this).attr('class'));
});
console.log(row)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableData" name="tableData">
<tr>
<td class="tdvalue"><a class="XXX">10</a></td>
<td class="tdvalue"><a class="YYY">4</a></td>
<td class="tdvalue"><a class="XXX">7</a></td>
</tr>
</table>

merging <td> rows in one column of html table

I have a requirement, if i have same data in column1 of 's with same id then i need to merge those cells and show their respective values in column2.
i.e., in fiddle http://jsfiddle.net/7t9qkLc0/12/ the key column have 3rows with data 1 as row value with same id and has corresponding different values in Value column i.e., AA,BB,CC. I want to merge the 3 rows in key Column and display data 1 only once and show their corresponding values in separate rows in value column.
Similarly for data4 and data5 the values are same i.e.,FF and keys are different, i want to merge last 2 rows in Value column and dispaly FF only one time and show corresponding keys in key column. All data i'm getting would be the dynamic data. Please suggest.
Please find the fiddle http://jsfiddle.net/7t9qkLc0/12/
Sample html code:
<table width="300px" height="150px" border="1">
<tr><th>Key</th><th>Value</th></tr>
<tr>
<td id="1">data 1</td>
<td id="aa">AA</td>
</tr>
<tr>
<td id="1">data 1</td>
<td id="bb">BB</td>
</tr>
<tr>
<td id="1">data 1</td>
<td id="cc">CC</td>
</tr>
<tr>
<td id="2">data 2</td>
<td id="dd">DD</td>
</tr>
<tr>
<td id="2">data 2</td>
<td id="ee">EE</td>
</tr>
<tr>
<td id="3">data 3</td>
<td id="ff">FF</td>
</tr>
<tr>
<td id="4">data 4</td>
<td id="ff">FF</td>
</tr>
<tr>
<td id="5">data 5</td>
<td id="ff">FF</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
</td>
</tr>
</table>

Building on tkounenis' answer using Rowspan:
One option to implement what you need would be to read all the values in your table after being populated, then use a JS object literal as a data structure to figure out what rows/columns are unique.
A JS object literal requires a unique key which you can map values to. After figuring out what rows/columns should be grouped, you can either edit the original table, or hide the original table and create a new table (I'm creating new tables in this example).
I've created an example for you to create a new table either grouped by key or grouped by value. Try to edit the examples provided to introduce both requirements.
Let me know if you need more help. Best of luck.
JSFiddle: http://jsfiddle.net/biz79/x417905v/
JS (uses jQuery):
sortByCol(0);
sortByCol(1);
function sortByCol(keyCol) {
// keyCol = 0 for first col, 1 for 2nd col
var valCol = (keyCol === 0) ? 1 : 0;
var $rows = $('#presort tr');
var dict = {};
var col1name = $('th').eq(keyCol).html();
var col2name = $('th').eq(valCol).html();
for (var i = 0; i < $rows.length; i++) {
if ($rows.eq(i).children('td').length > 0) {
var key = $rows.eq(i).children('td').eq(keyCol).html();
var val = $rows.eq(i).children('td').eq(valCol).html();
if (key in dict) {
dict[key].push(val);
} else {
dict[key] = [val];
}
}
}
redrawTable(dict,col1name,col2name);
}
function redrawTable(dict,col1name,col2name) {
var $table = $('<table>').attr("border",1);
$table.css( {"width":"300px" } );
$table.append($('<tr><th>' +col1name+ '</th><th>' +col2name+ '</th>'));
for (var prop in dict) {
for (var i = 0, len = dict[prop].length; i< len; i++) {
var $row = $('<tr>');
if ( i == 0) {
$row.append( $("<td>").attr('rowspan',len).html( prop ) );
$row.append( $("<td>").html( dict[prop][i] ) );
}
else {
$row.append( $("<td>").html( dict[prop][i] ) );
}
$table.append($row);
}
}
$('div').after($table);
}

Use the rowspan attribute like so:
<table width="300px" height="150px" border="1">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr>
<td id="1" rowspan="3">data 1</td>
<td id="aa">AA</td>
</tr>
<tr>
<td id="bb">BB</td>
</tr>
<tr>
<td id="cc">CC</td>
</tr>
<tr>
<td id="2" rowspan="2">data 2</td>
<td id="dd">DD</td>
</tr>
<tr>
<td id="ee">EE</td>
</tr>
<tr>
<td id="3">data 3</td>
<td id="ff">FF</td>
</tr>
<tr>
<td id="4">data 4</td>
<td id="ff">FF</td>
</tr>
<tr>
<td id="5">data 5</td>
<td id="ff">FF</td>
</tr>
</table>

http://jsfiddle.net/37b793pz/4/
Can not be used more than once the same id. For that use data-id attribute
HTML:
<table width="300px" height="150px" border="1">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr>
<td data-id="key1">data 1</td>
<td data-id="valaa">AA</td>
</tr>
<tr>
<td data-id="key1">data 1</td>
<td data-id="valbb">BB</td>
</tr>
<tr>
<td data-id="key1">data 1</td>
<td data-id="valcc">CC</td>
</tr>
<tr>
<td data-id="key2">data 2</td>
<td data-id="valdd">DD</td>
</tr>
<tr>
<td data-id="key2">data 2</td>
<td data-id="valee">EE</td>
</tr>
<tr>
<td data-id="key3">data 3</td>
<td data-id="valff">FF</td>
</tr>
<tr>
<td data-id="key4">data 4</td>
<td data-id="valff">FF</td>
</tr>
<tr>
<td data-id="key5">data 5</td>
<td data-id="valff">FF</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px"></td>
</tr>
</table>
JQ:
//merge cells in key column
function mergerKey() {
// prevents the same attribute is used more than once Ip
var idA = [];
// finds all cells id column Key
$('td[data-id^="key"]').each(function () {
var id = $(this).attr('data-id');
// prevents the same attribute is used more than once IIp
if ($.inArray(id, idA) == -1) {
idA.push(id);
// finds all cells that have the same data-id attribute
var $td = $('td[data-id="' + id + '"]');
//counts the number of cells with the same data-id
var count = $td.size();
if (count > 1) {
//If there is more than one
//then merging
$td.not(":eq(0)").remove();
$td.attr('rowspan', count);
}
}
})
}
//similar logic as for mergerKey()
function mergerVal() {
var idA = [];
$('td[data-id^="val"]').each(function () {
var id = $(this).attr('data-id');
if ($.inArray(id, idA) == -1) {
idA.push(id);
var $td = $('td[data-id="' + id + '"]');
var count = $td.size();
if (count > 1) {
$td.not(":eq(0)").remove();
$td.attr('rowspan', count);
}
}
})
}
mergerKey();
mergerVal();

Use below snippet of javascript. It should work fine for what you are looking.
<script type="text/javascript">
function mergeCommonCells(table, columnIndexToMerge){
previous = null;
cellToExtend = null;
table.find("td:nth-child("+columnIndexToMerge+")").each(function(){
jthis = $(this);
content = jthis.text();
if(previous == content){
jthis.remove();
if(cellToExtend.attr("rowspan") == undefined){
cellToExtend.attr("rowspan", 2);
}
else{
currentrowspan = parseInt(cellToExtend.attr("rowspan"));
cellToExtend.attr("rowspan", currentrowspan+1);
}
}
else{
previous = content;
cellToExtend = jthis;
}
});
};
mergeCommonCells($("#tableId"), 1);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Remove/Hide Table <tr>(s) which Their <td>(s) Does not Have Text

Can you please take a look at this demo and let me know how I can hide or remove all rows in a dynamic table that their <td> (if all of them in a row) are empty? This is mainly happend at the end of the table since I generated a table with 5 rows but some times I am getting only 3 or 4 rows data from the data source.
Please be informed that by empty I mean a text value not a html element like div.
<table style="width:100%">
<tr>
<td class="monBox">Jill</td>
<td class="monBox">Smith</td>
<td class="monBox">50</td>
</tr>
<tr>
<td class="monBox">Eve</td>
<td class="monBox">Jackson</td>
<td class="monBox">94</td>
</tr>
<tr>
<td class="monBox"></td>
<td class="monBox"></td>
<td class="monBox"></td>
</tr>
<tr>
<td class="monBox">Eve</td>
<td class="monBox">Jackson</td>
<td class="monBox">94</td>
</tr>
<tr>
<td class="monBox"></td>
<td class="monBox"></td>
<td class="monBox"></td>
</tr>
</table>
Thanks

Try going through each tr and checking if all td elements inside are empty like so
$('table').find('tr').each (function() {
var rows = 0;
var rows_empty = 0;
$(this).find('td').each (function() {
rows++;
if($(this).text().trim() == "")
rows_empty++;
});
if(rows === rows_empty)
$(this).remove();
});
jsfiddle

Try this, note I've given the table an ID of target:
//Loop through rows with empty cells
$("#target tr").has("td:empty").each(function(){
//hide the row if all cells are empty
if($(this).find("td").length === $(this).find("td:empty").length){
$(this).hide();
}
});
Fiddle
Or slightly simpler:
$("#target tr").has("td:empty").each(function(){
if($(this).find("td:not(:empty)").length === 0){
$(this).hide();
}
});
Or Better Still:
$('#target tr').not(':has(td:not(:empty))').remove();
Demo

$('#target tr').each(function(index,el).
{
if($.trim($(this).text()) == '')
{
$(this).remove();
}
}
);
It works without checking table cells at all

How Do I wrap only selected elements in jQuery

In a badly designed table like this:
<table id="bow-me">
<td class="show-me">Pet is Great</td>
<td class="show-me">Pete is Greate</td>
<td class="go-me">Met is Great</td>
<td class="go-me">Mete is Greate</td>
<td class="show-me">Latte is Great</td>
<td class="show-me">Lattus is Greate</td>
<td class="low-me">Bet is Great</td>
<td class="low-me">Bette is Greate</td>
<td class="go-me">Rat is Great</td>
<td class="go-me">Rate is Greate</td>
</table>
I need to add the <tr> tag after every 2 <td> tags using jQuery. To make things clear, I have separated 2 <td>s in above question.
At first I did:
$('.show-me').wrapAll('<tr class="know-me"> </tr>');
$('.go-me').wrapAll('<tr class="know-me"> </tr>');
$('.low-me').wrapAll('<tr class="know-me"> </tr>');
But the messes up the structure.
Then I tried wrap('<tr></tr>'), which wraps every td with tr.
I also tried with before() and after() methods, but wasn't successful with it too.
My ideal output should be:
<table id="bow-me">
<tr class="know-me">
<td class="show-me">Pet is Great</td>
<td class="show-me">Pete is Greate</td>
</tr>
<tr class="know-me">
<td class="go-me">Met is Great</td>
<td class="go-me">Mete is Greate</td>
</tr>
<tr class="know-me">
<td class="show-me">Latte is Great</td>
<td class="show-me">Lattus is Greate</td>
</tr>
<tr class="know-me">
<td class="low-me">Bet is Great</td>
<td class="low-me">Bette is Greate</td>
</tr>
<tr class="know-me">
<td class="go-me">Rat is Great</td>
<td class="go-me">Rate is Greate</td>
</tr>
</table>
Is there anyway I can do this with jQuery?
The JSFiddle

You can do:
var tds = $('#bow-me td');
for (var i = 0; i < tds.length; i += 2) {
tds.slice(i, i + 2).wrapAll('<tr class="know-me"></tr>');
}
Updated Fiddle
As #Blazemonger suggestion, you can use unwrap() to remove the auto-generated tr here:
$('.know-me').unwrap();
Updated Fiddle

HTML (the original source code) is not the same as the DOM (the page as your browser and jQuery understand it). When your browser reads the original HTML, it considers it invalid and automatically adds <tr> tags around all the table cells.
You ought to alter your original HTML, or else use div elements and CSS to add display: table-cell as needed. HTML:
<div id="bow-me">
<div class="show-me">Pet is Great</div>
<div class="show-me">Pete is Greate</div>
<div class="go-me">Met is Great</div>
<div class="go-me">Mete is Greate</div>
<div class="show-me">Latte is Great</div>
<div class="show-me">Lattus is Greate</div>
<div class="low-me">Bet is Great</div>
<div class="low-me">Bette is Greate</div>
<div class="go-me">Rat is Great</div>
<div class="go-me">Rate is Greate</div>
</div>
CSS:
#bow-me {
display: table;
}
.know-me {
display: table-row;
}
.show-me, .go-me, .low-me {
display: table-cell;
}
And now this slightly unorthodox jQuery will do what you want:
$('.show-me,.go-me,.low-me').each(function() {
var klass = $(this).attr('class');
if (!$(this).closest('.know-me').length) { // not already wrapped in a row
$(this).nextUntil(':not(".'+klass+'")').addBack()
.wrapAll('<div class="know-me">');
};
});
http://jsfiddle.net/mblase75/QhKP7/

I don't think you can wrap 2 dom nodes...
I suspect you will have to do something like:
$('#bow-me').find('td:nth-child(2n+1),td:nth-child(2n+2)').wrapAll('<tr class="know-me"></tr>');
Hope someone improves and finds a better way but for now thats all I got

You can use following code;
var length = $("#bow-me td").length;
for (var i = 0; i <= length; i += 2) {
$("#bow-me td:eq(" + i + "), #bow-me td:eq(" + (i+1) + ")").wrapAll('<tr class="know-me"></tr>');
}
Here is a working fiddle: http://jsfiddle.net/cubuzoa/WNQ3d/4/

You could do something like this:
var els = $('td'),
trow;
for (var i = 0; i < els.length; i++) {
if (i%2 === 0) {
trow = $('<tr class="know-me" />');
$(els[i]).before(trow);
trow.append(els[i]);
trow.append(els[i + 1]);
}
}
Code snippet:
var els = $('td'),
trow;
for (var i = 0; i < els.length; i++) {
if (i % 2 === 0) {
trow = $('<tr class="know-me" />');
$(els[i]).before(trow);
trow.append(els[i]);
trow.append(els[i + 1]);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="bow-me">
<td class="show-me">Pet is Great</td>
<td class="show-me">Pete is Greate</td>
<td class="go-me">Met is Great</td>
<td class="go-me">Mete is Greate</td>
<td class="show-me">Latte is Great</td>
<td class="show-me">Lattus is Greate</td>
<td class="low-me">Bet is Great</td>
<td class="low-me">Bette is Greate</td>
<td class="go-me">Rat is Great</td>
<td class="go-me">Rate is Greate</td>
</table>