jQuery: too much recursion But I need recursion for minesweeper - javascript

I am relatively new to javascript. I am trying to code my web version of minesweeper. Here is a recursive function I needed, and it looks to work fine until browser gives this "too much recursion" error. The problem is that i need that recursion. Is there any other way to code minesweeper? Here is the demo: http://altynachar.com/minesweeper/
I can post my php code if needed.
function recursive(id){
var id = id;
//Determine what kind of cell this is: Clean, Bomb or Adjasent to bomb
if($("#"+id).hasClass("adj")== true)
var under = "adj";
if($("#"+id).hasClass("bomb")==true)
var under = "bomb";
if($("#"+id).hasClass("clean")==true)
var under = "clean";
//open up the cell
$("#"+id).hide();
$("#under_"+id).show();
//if it is bomb, open up whole grid and button for restart
if(under == 'bomb')
{
$(".cover").hide();
$(".under").show();
$("body").append("<br /><input type='button' value='restart' onClick='javascript:window.location.reload();' />");
} else {
//if it is clean cell
if(under == "clean")
{
//get all the adjasent cell ids
var split = id.split('-');
var row = parseInt(split[0]);
var col = parseInt(split[1]);
var adjasent = new Array();
adjasent[0] = (row-1)+"-"+ (col+1);
adjasent[1] = row +"-"+(col+1);
adjasent[2] = (row+1)+"-"+(col+1);
adjasent[3] = (row+1)+"-"+col;
adjasent[4] = (row+1)+"-"+(col-1);
adjasent[5] = row+"-"+(col-1);
adjasent[6] = (row -1)+"-"+(col-1);
adjasent[7] = (row -1)+"-"+col;
//loop through adjasent cells
for(var i=0; i<adjasent.length; i++)
{
var split2 = adjasent[i].split('-');
var row2 = parseInt(split2[0]);
var col2 = parseInt(split2[1]);
//check if cell is existent
if(row2 > 0 && row2 < 17)
{
if(col2 > 0 && col2 < 17)
{
//perform recursion
var adj = adjasent[i];
recursive(adj);
}
}
}
}
}
}

My guess is that if you have 2 clean cells next to each other your code will get in an infinite recursion.
Each iteration recurses to all adjacent cells. So say cell A and B are next to each other, and both are clean. A will call recurse to B, which will then recurse to A, which recurses to B, and so on.
You can either try to clean up your recursion so that it doesn't look at cells that were already seen, or remove the recursion. You can accomplish the same thing by adding any unseen clean cells to a queue, and just keep popping off the end of the queue until it's empty. That might make it easier to avoid checking the same cell twice too.
Also, please don't build up strings just to split them into separate data later. Instead of:
adjasent[0] = (row-1)+"-"+ (col+1);
/* ... */
var split2 = adjasent[i].split('-');
var row2 = parseInt(split2[0]);
var col2 = parseInt(split2[1]);
just do
adjacent[0] = { row: row-1, col: col+1 };
/* ... */
var row2 = adjacent[0].row
var col2 = adjacent[0].col

Your recursion is essentially a depth-first search. The problem is that you do not account for visited cells. In other words, say you have 2 cells, A & B:
A B
When you click on A, it searches for adjacent cells, and comes up with a list containing B. You recurse, and then look for neighbors of B, which is a list containing A, and then you recurse again. This cycle never ends.
You need to mark each cell you visit and return if it has already been visited:
function recursive(id){
var id = id;
if( $("#"+id).hasClass('visited') ) {
return;
}
$("#"+id).addClass('visited');
...
}
Then you need to remove 'visited' from everything after recursion is complete:
$('div').removeClass('visited');

Keep a running array of cell id's to check, and delete these values from the array as you check them.
var stack = ["first_id_to_check"];
function check(id){
var id = id;
//Determine what kind of cell this is: Clean, Bomb or Adjasent to bomb
if($("#"+id).hasClass("adj")== true)
var under = "adj";
if($("#"+id).hasClass("bomb")==true)
var under = "bomb";
if($("#"+id).hasClass("clean")==true)
var under = "clean";
//open up the cell
$("#"+id).hide();
$("#under_"+id).show();
//if it is bomb, open up whole grid and button for restart
if(under == 'bomb')
{
$(".cover").hide();
$(".under").show();
$("body").append("<br /><input type='button' value='restart' onClick='javascript:window.location.reload();' />");
} else {
//if it is clean cell
if(under == "clean")
{
//get all the adjasent cell ids
var split = id.split('-');
var row = parseInt(split[0]);
var col = parseInt(split[1]);
var adjasent = new Array();
adjasent[0] = (row-1)+"-"+ (col+1);
adjasent[1] = row +"-"+(col+1);
adjasent[2] = (row+1)+"-"+(col+1);
adjasent[3] = (row+1)+"-"+col;
adjasent[4] = (row+1)+"-"+(col-1);
adjasent[5] = row+"-"+(col-1);
adjasent[6] = (row -1)+"-"+(col-1);
adjasent[7] = (row -1)+"-"+col;
//loop through adjasent cells
for(var i=0; i<adjasent.length; i++)
{
var split2 = adjasent[i].split('-');
var row2 = parseInt(split2[0]);
var col2 = parseInt(split2[1]);
//check if cell is existent
if(row2 > 0 && row2 < 17)
{
if(col2 > 0 && col2 < 17)
{
stack.push(adjasent[i]);
}
}
}
}
}
}
while(stack[0]!==undefined) {
check(stack[0]);
stack.splice(0,1);
}

Related

Js filtering 2 rows of a table with 1 input

Hi i'm developing a website for a Bathhouse and i need to optimize my search box but i have a small problem. I have the orders table with the name and surname divided in 2 rows and when i search for a people i can insert only the name or the surname not both!!
I would like to filter the entire row, ex i have the order number , name , surname .. and if I type all together with a space to find it like (46 Jace Smith).
table columns like that:
------------------------------
| # 46 | Name1 | Surname2 |
------------------------------
Now my code can only find by single columns , only the name or surname or order number..
< input class="form-control" id="SearchBox" onkeyup="myFunction()" type="text" placeholder="Search...">
<script>
function myFunction() {
// SearchBox -- TabellaPrenotazioni
// Declare variables
var input = document.getElementById("SearchBox");
var filter = input.value.toUpperCase();
var table = document.getElementById("TabellaPrenotazioni");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
// define the row's cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
}
</script>
I tried to concatenate the row but didn't wont to work...
ex:
var tds = trs[i].getElementsByTagName("td") +" " +trs[i++].getElementsByTagName("td");
Okay I thought of something, maybe you can map the row's cell's innerHTML to an array of strings and just search the string if it contains your query. Here's the modified code:
function myFunction() {
// SearchBox -- TabellaPrenotazioni
// Declare variables
var input = document.getElementById("SearchBox");
var filter = input.value.toUpperCase();
var table = document.getElementById("TabellaPrenotazioni");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
// define the row's cells
var tds = trs[i].getElementsByTagName("td");
// get the text from the row columns and put it in an array
let cellData = tds.map((td, index) => { td.innerHTML })
// turn it into a long string separated by spaces
let rowString = cellData.join(" ");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (rowString.includes(filter)) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
}
var timeout;
$("input").keyup(function(){
if(timeout){
clearTimeout(timeout);
}
timeout = setTimeout(function(){
let vals = $("input").val().split(" ").filter(function(val){
return val !== "";
}).map(function(val){
return new RegExp("^" + val + "$", "i");
});
$("tbody > tr").each(function(){
var tds = $(this).find("td");
var match = vals.reduce(function(match, val){
var submatch = false;
tds.each(function(){
if(val.test($(this).text())) submatch = true;
})
return match || submatch;
}, false)
if(match && vals.length > 0){
$(this).removeClass('hide');
}else{
$(this).addClass('hide');
}
})
clearTimeout(timeout);
}, 240)
})
.hide {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<table>
<thead><tr><th>Order #</th><th>Name</th><th>Surname</th></tr></thead>
<tbody>
<tr><td>100</td><td>James</td><td>Caffrey</td></tr>
<tr><td>105</td><td>Lucy</td><td>Nobel</td></tr>
<tr><td>110</td><td>Arthur</td><td>Wiseman</td></tr>
</tbody>
</table>
I included jQuery to make things clean and clear. You can do this without jQuery. The timeouts are used to debounce the user input and I also use Regular Experssions to do string matching.

How can I highlight duplicate rows in my sheet based on column value?

I am trying to highlight duplicate rows in my sheet by checking for the same email address entered under the 'Email Address' column.
I have some code (below) that does this - it looks for duplicate rows based on repeated values under 'Email Address' and highlights them red. However, once I revisit the sheet, manually remove the duplicate row and rerun the script, the same row is highlighted again. Why is this happening and what can I do to ensure that when I update the sheet, the (now) unique row is not highlighted again?
function findDupes() {
var CHECK_COLUMNS = [3];
var sourceSheet = SpreadsheetApp.getActiveSheet();
var numRows = sourceSheet.getLastRow();
var numCols = sourceSheet.getLastColumn();
var ss = SpreadsheetApp.getActiveSpreadsheet();
var newSheet = ss.insertSheet("FindDupes");
for (var i = 0; i < CHECK_COLUMNS.length; i++) {
var sourceRange = sourceSheet.getRange(1,CHECK_COLUMNS[i],numRows);
var nextCol = newSheet.getLastColumn() + 1;
sourceRange.copyTo(newSheet.getRange(1,nextCol,numRows));
}
var dupes = false;
var data = newSheet.getDataRange().getValues();
for (i = 1; i < data.length - 1; i++) {
for (j = i+1; j < data.length; j++) {
if (data[i].join() == data[j].join()) {
dupes = true;
sourceSheet.getRange(i+1,1,1,numCols).setBackground("crimson");
sourceSheet.getRange(j+1,1,1,numCols).setBackground("crimson");
}
}
}
ss.deleteSheet(newSheet);
if (dupes) {
Browser.msgBox("Possible duplicate(s) found. Please check for repeat attendees.");
} else {
Browser.msgBox("No duplicates found.");
}
};
I want to be able to run the script again once I have manually removed the rows and have it reflect the updated nature of the sheet.
Try this:
Sorry, but there were so many things I couldn't understand why you were doing them that I find it easier just to show you how I'd do it.
function findAndHighlightDupesInColumn(col) {
var col=col||3;//I think you wanted to check column 3
var ss=SpreadsheetApp.getActive();
var sh=ss.getActiveSheet();
var rg=sh.getDataRange();
var vA=rg.getValues();//gets all data
var uA=[];//this is the array that hold all unique values
for(var i=1;i<vA.length;i++) {//assumes one header row
if(uA.indexOf(vA[i][col-1])==-1) {//if it's unique then put it in uA
uA.push(vA[i][col-1]);
}else{//if it's not unique then set background color
sh.getRange(i+1,1,1,sh.getLastColumn()).setBackground('crimson');
}
}
}
The following code will remove duplicates in column 3:
This method assumes that the first occurrence of any row is the row that you wish to keep. All other duplicate rows are deleted.
function removeColumnDupes(col) {
var col=col||3
var ss=SpreadsheetApp.getActive();
var sh=ss.getActiveSheet();
var rg=sh.getDataRange();
var vA=rg.getValues();
var uA=[];
var d=0;
for(var i=1;i<vA.length;i++) {
if(uA.indexOf(vA[i][col-1])==-1) {
uA.push(vA[i][col-1]);
}else{
sh.deleteRow(i+1-d++);
}
}
}
Try adding this before the for loops. It will turn all the rows into white, and then the rest of your code will turn the duplicates red:
sourceSheet.getRange(2,1,numRows,numCols).setBackground("white");
Also, you can add an onEdit() function to check for duplicates in real time, when you add or edit an email address:
function onEdit(e){
if (e.range.getColumn() == 3){
var sourceSheet = SpreadsheetApp.getActiveSheet();
var numRows = sourceSheet.getLastRow();
var numCols = sourceSheet.getLastColumn();
var data = sourceSheet.getRange("C2:C"+numRows).getValues();
var editedCell = e.value;
for (var i = 0; i < data.length;i++){
if (editedCell == data[i] && (i + 2) != e.range.getRow()){
sourceSheet.getRange(e.range.getRow(),1,1,numCols).setBackground("crimson");
sourceSheet.getRange(i+2,1,1,numCols).setBackground("crimson");
}
}
}
}

How to prevent additional table creation

I've been looking for workarounds to ensure that only one table is created. So far the only one i have come up with is to disable the button after it had been pressed. Here is my code:
function bikeData() {
// Select the Table
var tbl = document.getElementById('bikeInnerTable');
var th = document.getElementById('tableHead_B');
var headerText = ["ID", "Bike Status", "Bike Location", "Depot ID"];
// Set number of rows
var rows = 10;
// Set number of columns
var columns = headerText.length;
// create table header
for (var h = 0; h < columns; h++) {
var td = document.createElement("td");
td.innerText = headerText[h];
th.appendChild(td);
}
// create table data
for (var r = 0; r < rows; r++) {
var cellText = ["UNDEFINED", "UNDEFINED", "UNDEFINED", "UNDEFINED"];
// generate ID
x = getRandomNumber(1000, 1);
cellText[0] = x;
// generate Status
x = getStatus();
cellText[1] = x;
// generate Name
x = getLocation();
cellText[2] = x;
// generate depot ID
x = getRandomNumber(1000, 1);
cellText[3] = x;
var tr = document.getElementById("b_row" + r);
for (var c = 0; c < columns; c++)
{
var td = document.createElement("td");
td.innerText = cellText[c];
tr.appendChild(td);
}
}
}
If the button is pressed multiple times then the table is created multiple times. However how can I adapt the code to ensure that it if the table is already present within the div, then it doesn't continue in creating the table additional times.
You can set a flag and then only execute the code when applicable.
let firstTime = true;
function(){
...
if (firstTime) {
firstTime = false;
...
}
}
This is what Javascript variables are for. You can make a variable, then test that against a condition in the function. Let me show you what I mean:
window.timesRan = 0;
function bikeData() {
//Check if the variable is > 1
if (timesRan > 1) {
return false;
}
//code here
//then just add 1 to the variable every time
timesRan += 1;
}
All the best, and I hope my answer works for you :)

how do I best display matches from a large json object?

I am loading data from a json object into a table on my page. Then I allow the user to filter that data via an input and display only the matches. My method of doing this is surely not great but it does work.
Now I want to do the exact same thing with a list of airports and their codes. Problem is that the airport list is much longer and the page bogs down significantly when loading the table with data and when it searches for the user's input in the table.
Here's the information for the page that does work so you can se what Im doing.
What can I do differently to achive the same effect I have here when I have a much larger data set to search?
Page Displaying data: (type "american airlines" or "aa"as an example)
https://pnrbuilder.com/_popups/dataDecoder.php
json object containing airline information:
https://pnrbuilder.com/_java/airlineDecoder.js
Sript that loads data to the page and filters it based on user input:
https://pnrbuilder.com/_java/decodeData.js
Here's the most significant parts of my code:
// This function is called by a for loop on dom ready
// It basically prints data stored in a json object to a table on the page
function fillInfo(line) {
var table = document.getElementById('decodeTable');
var row = document.createElement('tr');
table.appendChild(row);
var col1 = document.createElement('td');
row.appendChild(col1);
var curCode = document.createTextNode(arlnInfo.d[line].IATA);
col1.appendChild(curCode);
var col2 = document.createElement('td');
row.appendChild(col2);
var curArln = document.createTextNode(arlnInfo.d[line].Airline);
col2.appendChild(curArln);
var col3 = document.createElement('td');
row.appendChild(col3);
var curPre = document.createTextNode(arlnInfo.d[line].Prefix);
col3.appendChild(curPre);
var col4 = document.createElement('td');
row.appendChild(col4);
var curIcao = document.createTextNode(arlnInfo.d[line].ICAO);
col4.appendChild(curIcao);
var col5 = document.createElement('td');
row.appendChild(col5);
var curCnty = document.createTextNode(arlnInfo.d[line].Country);
col5.appendChild(curCnty);
}
// This function checks user input against data in the table
// If a match is found whitin a row, the row containing the match is shown
// If a match is not found that row is hidden
function filterTable(input) {
var decodeTable = document.getElementById('decodeTable');
var inputLength = input.length;
// THis first part makes sure that all rows of the generated table are hidden when no input is present
if (inputLength == 0) {
for (var r = 1; r < decodeTable.rows.length; r++) {
decodeTable.rows[r].style.display = "none";
}
}
// This part checks just the airline codes "column" of the table when input is only one or two characters
else if (inputLength < 3) {
for (var r = 1; r < decodeTable.rows.length; r++) {
var celVal = $(decodeTable.rows[r].cells[0])
.text()
.slice(0, inputLength)
.toLowerCase();
if (celVal == input) {
decodeTable.rows[r].style.display = "";
} else {
decodeTable.rows[r].style.display = "none";
}
}
}
// This part checks several "columns" of the table when input is more than two characters
else if (inputLength > 2) {
for (var r = 1; r < decodeTable.rows.length; r++) {
var celVal = $(decodeTable.rows[r].cells[2])
.text()
.slice(0, inputLength)
.toLowerCase();
var celVal2 = $(decodeTable.rows[r].cells[1])
.text();
if (celVal == input || celVal2 == input) {
decodeTable.rows[r].style.display = "";
} else if (celVal2.replace(/<[^>]+>/g, "")
.toLowerCase()
.indexOf(input) >= 0) {
decodeTable.rows[r].style.display = "";
} else {
decodeTable.rows[r].style.display = "none";
}
}
}
}
The first little optimization you could apply is not to do the entire filter on every key up, wait until the user finished typing so delay calling it for half a second:
var timeOut = 0;
$("#deCode").keyup(function () {
// cancel looking, the user typed another character
clearTimeout(timeOut);
// set a timeout, when user doesn't type another key
// within half a second the filter will run
var input = $("#deCode").val().toLowerCase().trim();
timeOut=setTimeout(function(){
filterTable(input)
},500);
});
The next is comparing to your json data instead of jquery objects and converting your JSON data to lower case after creating the table so you don't have to check toLowerCase every time for every row:
function filterTable(input) {
var decodeTable = document.getElementById('decodeTable');
var inputLength = input.length;
if (inputLength ==0) {
for (var r = 1; r < decodeTable.rows.length; r++) {
decodeTable.rows[r].style.display = "none";
}
}
else if (inputLength <3) {
for (var r = 0; r < arlnInfo.d.length; r++) {
if (arlnInfo.d[r].IATA.indexOf(input)===0) {
decodeTable.rows[r+1].style.display = "";
}
else {
decodeTable.rows[r+1].style.display = "none";
}
}
}
else if (inputLength > 2) {
for (var r = 0; r < arlnInfo.d.length; r++) {
if (arlnInfo.d[r].Prefix.indexOf(input)===0) {
decodeTable.rows[r].style.display = "";
}
else if (arlnInfo.d[r].Airline.indexOf(input) >= 0) {
decodeTable.rows[r + 1].style.display = "";
}
else {
decodeTable.rows[r + 1].style.display = "none";
}
}
}
}
Problem is with your JSON data: "Prefix": 430 causes arlnInfo.d[r].Prefix.slice(0, inputLength) to throw an error because the data isn't a string but a number. If you have control over the JSON then you should convert these values to string ("Prefix":"430"), If you don't then convert it once and re create airlineDecoder.js using JSON.stringify(arlnInfo);
To convert your JSON you can copy and paste this in the chrome console (press F12) and run it (press enter). It'll log the converted JSON but you may need an IDE like netbeans to re format it:
var i = 0;
for(i=0;i<arlnInfo.d.length;i++){
arlnInfo.d[i].Prefix=arlnInfo.d[i].Prefix+"";
}
console.log("var arlnInfo = " + JSON.stringify(arlnInfo));
A last optimization you can apply is use DocumentFragment instead of directly adding every row to DOM, here we convert the JSON data to lower case so we don't have to do that for every search:
var decodeTable = document.getElementById('decodeTable');
function createTable() {
var df = document.createDocumentFragment();
for (var i = 0; i < arlnInfo.d.length; i++) {
fillInfo(i, df);
arlnInfo.d[i].IATA = arlnInfo.d[i].IATA.toLowerCase()
arlnInfo.d[i].Prefix = arlnInfo.d[i].Prefix.toLowerCase();
arlnInfo.d[i].Airline = arlnInfo.d[i].Airline.toLowerCase();
}
decodeTable.appendChild(df);
}
createTable();
....
function fillInfo(line,df) {
var row = document.createElement('tr');
df.appendChild(row);
....
row.style.display = "none";
}

Handle cells with rowspan when hiding table rows

I have a table containing cells with rowspan attributes, I would like to:
Whenever a tr is hidden, the table will rearrange itself correctly
Whenever a tr is shown again, it will be restored to original state
So if you have a table like this clicking on X shouldn't destroy the layout.
and click a come back button, should restore the original layout.
(try removing all rows from bottom-up, and than restoring them from right-to-left, this is a desired flow)
I had some semi-solutions, but all seem too complicated, and i'm sure there is a nice way to handle this.
OK I really spent a hell of a long time over this question, so here goes...
For those of you who just want to see the working solution, click here
Update: I've changed the visual columns calculation method to iterate over the table and create a 2-dimensional array, to see the old method which used the jQuery offset() method, click here. The code is shorter, but more time costly.
The problem exists because when we hide a row, whilst we want all the cells to be hidden, we want the pseudo-cells — that is, the cells that appear to be in the following rows due to the cells rowspan attribute — to persist. To get around this, whenever we come across a hidden cell with a rowspan, we try to move it down the the next visible row (decrementing it's rowspan value as we go). With either our original cell or it's clone, we then iterate down the table once more for every row that would contain a pseudo-cell, and if the row is hidden we decrement the rowspan again. (To understand why, look at the working example, and note that when the blue row is hidden, red cell 9's rowspan must be reduced from 2 to 1, else it would push green 9 right).
With that in mind, we must apply the following function whenever rows are shown/hidden:
function calculate_rowspans() {
// Remove all temporary cells
$(".tmp").remove();
// We don't care about the last row
// If it's hidden, it's cells can't go anywhere else
$("tr").not(":last").each(function() {
var $tr = $(this);
// Iterate over all non-tmp cells with a rowspan
$("td[rowspan]:not(.tmp)", $tr).each(function() {
$td = $(this);
var $rows_down = $tr;
var new_rowspan = 1;
// If the cell is visible then we don't need to create a copy
if($td.is(":visible")) {
// Traverse down the table given the rowspan
for(var i = 0; i < $td.data("rowspan") - 1; i ++) {
$rows_down = $rows_down.next();
// If our cell's row is visible then it can have a rowspan
if($rows_down.is(":visible")) {
new_rowspan ++;
}
}
// Set our rowspan value
$td.attr("rowspan", new_rowspan);
}
else {
// We'll normally create a copy, unless all of the rows
// that the cell would cover are hidden
var $copy = false;
// Iterate down over all rows the cell would normally cover
for(var i = 0; i < $td.data("rowspan") - 1; i ++) {
$rows_down = $rows_down.next();
// We only consider visible rows
if($rows_down.is(":visible")) {
// If first visible row, create a copy
if(!$copy) {
$copy = $td.clone(true).addClass("tmp");
// You could do this 1000 better ways, using classes e.g
$copy.css({
"background-color": $td.parent().css("background-color")
});
// Insert the copy where the original would normally be
// by positioning it relative to it's columns data value
var $before = $("td", $rows_down).filter(function() {
return $(this).data("column") > $copy.data("column");
});
if($before.length) $before.eq(0).before($copy);
else $(".delete-cell", $rows_down).before($copy);
}
// For all other visible rows, increment the rowspan
else new_rowspan ++;
}
}
// If we made a copy then set the rowspan value
if(copy) copy.attr("rowspan", new_rowspan);
}
});
});
}
The next, really difficult part of the question is calculating at which index to place the copies of the cells within the row. Note in the example, blue cell 2 has an actual index within its row of 0, i.e. it's the first actual cell within the row, however we can see that visually it lies in column 2 (0-indexed).
I took the approach of calculating this only once, as soon as the document is loaded. I then store this value as a data attribute of the cell, so that I can position a copy of it in the right place (I've had many Eureka moments on this one, and made many pages of notes!). To do this calculation, I ended up constructing a 2-dimensional Array matrix which keeps track of all of the used-visual columns. At the same time, I store the cells original rowspan value, as this will change with hiding/showing rows:
function get_cell_data() {
var matrix = [];
$("tr").each(function(i) {
var $cells_in_row = $("td", this);
// If doesn't exist, create array for row
if(!matrix[i]) matrix[i] = [];
$cells_in_row.each(function(j) {
// CALCULATE VISUAL COLUMN
// Store progress in matrix
var column = next_column(matrix[i]);
// Store it in data to use later
$(this).data("column", column);
// Consume this space
matrix[i][column] = "x";
// If the cell has a rowspan, consume space across
// Other rows by iterating down
if($(this).attr("rowspan")) {
// Store rowspan in data, so it's not lost
var rowspan = parseInt($(this).attr("rowspan"));
$(this).data("rowspan", rowspan);
for(var x = 1; x < rowspan; x++) {
// If this row doesn't yet exist, create it
if(!matrix[i+x]) matrix[i+x] = [];
matrix[i+x][column] = "x";
}
}
});
});
// Calculate the next empty column in our array
// Note that our array will be sparse at times, and
// so we need to fill the first empty index or push to end
function next_column(ar) {
for(var next = 0; next < ar.length; next ++) {
if(!ar[next]) return next;
}
return next;
}
}
Then simply apply this on page load:
$(document).ready(function() {
get_cell_data();
});
(Note: whilst the code here is longer than my jQuery .offset() alternative, it's probably quicker to calculate. Please correct me if I'm wrong).
Working solution - http://codepen.io/jmarroyave/pen/eLkst
This is basically the same solution that i presented before, i just changed how to get the column index to remove the restriction of the jquery.position, and did some refactor to the code.
function layoutInitialize(tableId){
var layout = String();
var maxCols, maxRows, pos, i, rowspan, idx, xy;
maxCols = $(tableId + ' tr').first().children().length;
maxRows = $(tableId + ' tr').length;
// Initialize the layout matrix
for(i = 0; i < (maxCols * maxRows); i++){
layout += '?';
}
// Initialize cell data
$(tableId + ' td').each(function() {
$(this).addClass($(this).parent().attr('color_class'));
rowspan = 1;
if($(this).attr('rowspan')){
rowspan = $(this).attr("rowspan");
$(this).data("rowspan", rowspan);
}
// Look for the next position available
idx = layout.indexOf('?');
pos = {x:idx % maxCols, y:Math.floor(idx / maxCols)};
// store the column index in the cell for future reposition
$(this).data('column', pos.x);
for(i = 0; i < rowspan; i++){
// Mark this position as not available
xy = (maxCols * pos.y) + pos.x
layout = layout.substr(0, xy + (i * maxCols)) + 'X' + layout.substr(xy + (i * maxCols) + 1);
}
});
}
Solution: with jquery.position() - http://codepen.io/jmarroyave/pen/rftdy
This is an alternative solution, it assumes that the first row contains all the information about the number of the table columns and the position of each on.
This aproach has the restriction that the inizialitation code must be call when the table is visible, because it depends on the visible position of the columns.
If this is not an issue, hope it works for you
Initialization
// Initialize cell data
$('td').each(function() {
$(this).addClass($(this).parent().attr('color_class'));
$(this).data('posx', $(this).position().left);
if($(this).attr('rowspan')){
$(this).data("rowspan", $(this).attr("rowspan"));
}
});
UPDATE
According to this post ensuring the visibility of the table can be manage with
$('table').show();
// Initialize cell data
$('td').each(function() {
$(this).addClass($(this).parent().attr('color_class'));
$(this).data('posx', $(this).position().left);
if($(this).attr('rowspan')){
$(this).data("rowspan", $(this).attr("rowspan"));
}
});
$('table').hide();
As Ian said, the main issue to solve in this problem is to calculate the position of the cells when merging the hidden with the visible rows.
I tried to figure it out how the browser implements that funcionality and how to work with that. Then looking the DOM i searched for something like columnVisiblePosition and i found the position attributes and took that way
function getColumnVisiblePostion($firstRow, $cell){
var tdsFirstRow = $firstRow.children();
for(var i = 0; i < tdsFirstRow.length; i++){
if($(tdsFirstRow[i]).data('posx') == $cell.data('posx')){
return i;
}
}
}
The js code
$(document).ready(function () {
add_delete_buttons();
$(window).on("tr_gone", function (e, tr) {
add_come_back_button(tr);
});
// Initialize cell data
$('td').each(function() {
$(this).addClass($(this).parent().attr('color_class'));
$(this).data('posx', $(this).position().left);
if($(this).attr('rowspan')){
$(this).data("rowspan", $(this).attr("rowspan"));
}
});
});
function calculate_max_rowspans() {
// Remove all temporary cells
$(".tmp").remove();
// Get all rows
var trs = $('tr'), tds, tdsTarget,
$tr, $trTarget, $td, $trFirst,
cellPos, cellTargetPos, i;
// Get the first row, this is the layout reference
$trFirst = $('tr').first();
// Iterate through all rows
for(var rowIdx = 0; rowIdx < trs.length; rowIdx++){
$tr = $(trs[rowIdx]);
$trTarget = $(trs[rowIdx+1]);
tds = $tr.children();
// For each cell in row
for(cellIdx = 0; cellIdx < tds.length; cellIdx++){
$td = $(tds[cellIdx]);
// Find which one has a rowspan
if($td.data('rowspan')){
var rowspan = Number($td.data('rowspan'));
// Evaluate how the rowspan should be display in the current state
// verify if the cell with rowspan has some hidden rows
for(i = rowIdx; i < (rowIdx + Number($td.data('rowspan'))); i++){
if(!$(trs[i]).is(':visible')){
rowspan--;
}
}
$td.attr('rowspan', rowspan);
// if the cell doesn't have rows hidden within, evaluate the next cell
if(rowspan == $td.data('rowspan')) continue;
// If this row is hidden copy the values to the next row
if(!$tr.is(':visible') && rowspan > 0) {
$clone = $td.clone();
// right now, the script doesn't care about copying data,
// but here is the place to implement it
$clone.data('rowspan', $td.data('rowspan') - 1);
$clone.data('posx', $td.data('posx'));
$clone.attr('rowspan', rowspan);
$clone.addClass('tmp');
// Insert the temp node in the correct position
// Get the current cell position
cellPos = getColumnVisiblePostion($trFirst, $td);
// if is the last just append it
if(cellPos == $trFirst.children().length - 1){
$trTarget.append($clone);
}
// Otherwise, insert it before its closer sibling
else {
tdsTarget = $trTarget.children();
for(i = 0; i < tdsTarget.length; i++){
cellTargetPos = getColumnVisiblePostion($trFirst, $(tdsTarget[i]));
if(cellPos < cellTargetPos){
$(tdsTarget[i]).before($clone);
break;
}
}
}
}
}
}
// remove tmp nodes from the previous row
if(rowIdx > 0){
$tr = $(trs[rowIdx-1]);
if(!$tr.is(':visible')){
$tr.children(".tmp").remove();
}
}
}
}
// this function calculates the position of a column
// based on the visible position
function getColumnVisiblePostion($firstRow, $cell){
var tdsFirstRow = $firstRow.children();
for(var i = 0; i < tdsFirstRow.length; i++){
if($(tdsFirstRow[i]).data('posx') == $cell.data('posx')){
return i;
}
}
}
function add_delete_buttons() {
var $all_rows = $("tr");
$all_rows.each(function () {
// TR to remove
var $tr = $(this);
var delete_btn = $("<button>").text("x");
delete_btn.on("click", function () {
$tr.hide();
calculate_max_rowspans();
$(window).trigger("tr_gone", $tr);
});
var delete_cell = $("<td>");
delete_cell.append(delete_btn);
$(this).append(delete_cell);
});
}
function add_come_back_button(tr) {
var $tr = $(tr);
var come_back_btn = $("<button>").text("come back " + $tr.attr("color_class"));
come_back_btn.css({"background": $(tr).css("background")});
come_back_btn.on("click", function () {
$tr.show();
come_back_btn.remove();
calculate_max_rowspans();
});
$("table").before(come_back_btn);
}
if you have any questions or comments let me know.
I'm assuming you want the the rows to shift upward when you hide the row but you do not want the cells to shift left.
Here is what I got http://codepen.io/anon/pen/prDcK
I added two css rules:
#come_back_container{height: 30px;}
td[rowspan='0']{background-color: white;}
Here is the html I used:
<div id="come_back_container"></div>
<table id="dynamic_table" cellpadding=7></table>
<table id="dynamic_table2" cellpadding=7>
<tr style="background-color: red">
<td rowspan="5">a</td>
<td rowspan="1">b</td>
<td rowspan="5">c</td>
<td rowspan="1">d</td>
<td rowspan="2">e</td>
</tr>
<tr style="background-color: grey">
<td rowspan="0">f</td>
<td rowspan="1">g</td>
<td rowspan="0">h</td>
<td rowspan="1">i</td>
<td rowspan="0">j</td>
</tr>
<tr style="background-color: blue">
<td rowspan="0">k</td>
<td rowspan="1">l</td>
<td rowspan="0">m</td>
<td rowspan="1">n</td>
<td rowspan="1">o</td>
</tr>
<tr style="background-color: yellow">
<td rowspan="0">p</td>
<td rowspan="1">q</td>
<td rowspan="0">r</td>
<td rowspan="1">s</td>
<td rowspan="2">t</td>
</tr>
<tr style="background-color: green">
<td rowspan="0">u</td>
<td rowspan="1">v</td>
<td rowspan="0">w</td>
<td rowspan="1">x</td>
<td rowspan="0">y</td>
</tr>
</table>
The first rule is just to keep the top edge of the table in the same place. The second rule is to make the cells appear blank by blending in with the background, so change accordingly.
Finally here is the js:
$(function () {
//firstTable()
var myTb2 = new dynamicTable();
myTb2.createFromElement( $("#dynamic_table2") );
myTb2.drawTable()
$(window).on("tr_hide", function (e,data){
var tbl = data.ctx,
rowIndex = data.idx;
tbl.hideRow.call(tbl, rowIndex);
})
$(window).on("tr_show", function (e,data){
var tbl = data.ctx,
rowIndex = data.idx;
tbl.showRow.call(tbl, rowIndex);
})
})
function dynamicTableItem(){
this.height = null;
this.content = null;
}
function dynamicTableRow(){
this.color = null;
this.items = []
this.show = true
this.setNumColumns = function(numCols){
for(var i=0;i<numCols;i++){
var item = new dynamicTableItem();
item.height = 0;
this.items.push(item)
}
}
this.addItem = function(index, height, content){
var item = new dynamicTableItem();
item.height = height;
item.content = content;
if(index>=this.items.length){ console.error("index out of range",index); }
this.items[index] = item;
}
}
function dynamicTable(){
this.element = null;
this.numCols = null;
this.rows = []
this.addRow = function(color){
var row = new dynamicTableRow();
row.color = color;
row.setNumColumns(this.numCols)
var length = this.rows.push( row )
return this.rows[length-1]
}
this.drawTable = function(){
this.element.empty()
var cols = [],
rowElements = [];
for(var i=0;i<this.numCols;i++){
cols.push( [] )
}
for(var r=0; r<this.rows.length; r++){
var row = this.rows[r]
if(row.show){
var $tr = $("<tr>"),
delete_cell = $("<td>"),
delete_btn = $("<button>").text("x")
var data = {ctx: this, idx: r};
delete_btn.on("click", data, function(e){
$(window).trigger("tr_hide", e.data);
})
delete_cell.addClass("deleteCell");
$tr.css( {"background": row.color} );
delete_cell.append(delete_btn);
$tr.append(delete_cell);
this.element.append($tr);
rowElements.push( $tr );
for(var i=0; i<row.items.length; i++){
cols[i].push( row.items[i] );
}
}
}
for(var c=0; c<cols.length; c++){
var cellsFilled = 0;
for(var r=0; r<cols[c].length; r++){
var item = cols[c][r]
var size = item.height;
if(r>=cellsFilled){
cellsFilled += (size>0 ? size : 1);
var el = $("<td>").attr("rowspan",size);
el.append(item.content);
rowElements[r].children().last().before(el);
}
}
}
}
this.hideRow = function(rowIndex){
var row = this.rows[rowIndex]
row.show = false;
var come_back_btn = $("<button>").text("come back");
come_back_btn.css( {"background": row.color} );
var data = {ctx:this, idx:rowIndex};
come_back_btn.on("click", data, function(e){
$(window).trigger("tr_show", e.data);
$(this).remove();
});
$("#come_back_container").append(come_back_btn);
this.drawTable();
}
this.showRow = function(rowIndex){
this.rows[rowIndex].show = true;
this.drawTable();
}
this.createFromElement = function(tbl){
this.element = tbl;
var tblBody = tbl.children().filter("tbody")
var rows = tblBody.children().filter("tr")
this.numCols = rows.length
for(var r=0;r<rows.length;r++){
var row = this.addRow( $(rows[r]).css("background-color") );
var items = $(rows[r]).children().filter("td");
for(var i=0;i<items.length;i++){
var item = $(items[i]);
var height = parseInt(item.attr("rowspan"));
var contents = item.contents();
row.addItem(i,height,contents);
}
}
//console.log(this);
}
}
function firstTable(){
var myTable = new dynamicTable();
myTable.element = $("#dynamic_table");
myTable.numCols = 5
var red = myTable.addRow("red");
red.addItem(0,5);
red.addItem(1,1);
red.addItem(2,5);
red.addItem(3,1);
red.addItem(4,2);
var white = myTable.addRow("grey");
//white.addItem(0,0);
white.addItem(1,1);
//white.addItem(2,0);
white.addItem(3,1);
//white.addItem(4,0);
var blue = myTable.addRow("blue");
//blue.addItem(0,3); //try uncommenting this and removing red
blue.addItem(1,1);
//blue.addItem(2,0);
blue.addItem(3,1);
blue.addItem(4,1);
var yellow = myTable.addRow("yellow");
//yellow.addItem(0,0);
yellow.addItem(1,1);
//yellow.addItem(2,0);
yellow.addItem(3,1);
yellow.addItem(4,2);
var green = myTable.addRow("green");
//green.addItem(0,0);
green.addItem(1,1);
//green.addItem(2,0);
green.addItem(3,1);
//green.addItem(4,0);
myTable.drawTable();
}
I tried to use clear variable and method names but if you have any quests just ask.
PS- I know there is no easy way to add content to the cells right now but you only asked for disappearing rows.

Categories