Why isn't the JQuery script removing table rows

Question

I'm trying my hand at web development and one of my early projects is to create a grid that is mutable in size and responds to mouse events.

For some reason (I'm sure there is a good one), my function to change the grid size doesn't always remove all of the necessary rows.

Ex. When changing the grid size from 10 to 4, or 6 to 2, there are additional rows that are not removed

CODE PEN

HTML

<!DOCTYPE html>
<html>
<head>
<title>My Grid</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div id='container'>
    <div id='userSettings'>
        <h1>Welcome to "My Grid"</h1>
        <form>
            <input id='gridSizeValue' type='text' name="gridSize">
            <input id='button' type='button' value="Change Grid Size">
        </form>
    </div>

    <table class='mainTable' style="border-color: black; border-top-width: 5px;">
        <tr class="tableRow">
            <td class="tableColumn">
            <td class="tableColumn">
            <td class="tableColumn">
            <td class="tableColumn">
        </tr>
        <tr class="tableRow">
            <td class="tableColumn">
            <td class="tableColumn">
            <td class="tableColumn">
            <td class="tableColumn">
        </tr>
        <tr class="tableRow">
            <td class="tableColumn">
            <td class="tableColumn">
            <td class="tableColumn">
            <td class="tableColumn">
        </tr>
        <tr class="tableRow">
            <td class="tableColumn">
            <td class="tableColumn">
            <td class="tableColumn">
            <td class="tableColumn">
        </tr>
    </table>
</div>

JavaScript

$(document).ready(function(){

$('#button').click(function(){
    var gridSize = document.getElementById('gridSizeValue').value;
    var amountOfTableRows = document.getElementsByClassName('tableRow').length;
    setTableRows(amountOfTableRows, gridSize);
});
styleTable();
});

function setTableRows(currentAmountOfRows, newGridSize) {
// Check if the number of rows is less than or greater than current amount of    rows
// either add or subtract rows
// loop through rows and either add or subtract columns 

    if (newGridSize > currentAmountOfRows) {
        var rowsToAdd = newGridSize - currentAmountOfRows;
        for (var i = 0; i < rowsToAdd; i++) {
            $('.mainTable').append("<tr class=\"tableRow\"></tr>");
        }
        newAmountOfRows = document.getElementsByClassName('tableRow');
        for (var i = 0; i < newAmountOfRows.length; i++) {
            currentAmountOfColumnsInRow = newAmountOfRows[i].getElementsByClassName('tableColumn').length;
            columnsToAdd = newGridSize - currentAmountOfColumnsInRow;
            // console.log("Need to add " + columnsToAdd + "columns");
            for (var j = 0; j < columnsToAdd; j++) {
                $('.tableRow:nth-child(' + (i+1) +')').append("<td class=\"tableColumn\">");    
            }
        }
    } 


    else if (newGridSize < currentAmountOfRows){
        var rowsToSubtract = currentAmountOfRows - newGridSize;
        for (var i = 0; i < rowsToSubtract; i++) {
            $('.tableRow:nth-child(' + (i+1) +')').remove();
        }

        newAmountOfRows = document.getElementsByClassName('tableRow');
        for (var i = 0; i < newAmountOfRows.length; i++) {
            currentAmountOfColumnsInRow = newAmountOfRows[i].getElementsByClassName('tableColumn').length;
            columnsToSubtract = currentAmountOfColumnsInRow - newGridSize;
            // console.log("There are " + currentAmountOfColumnsInRow + " columns in row" + (i+1));
            for (var j = 0; j < columnsToSubtract; j++) {
                $('.tableColumn:nth-child(' + (i+1) +')').remove();
            }
        }
    } 
    styleTable();
} 

function styleTable(){

$('td').mouseenter(function(){
    $(this).css("background-color","white");
});

$('td').mouseleave(function(){
    $(this).css("background-color","black");
});

//Option 1: set height and width of each "cell" to the total height of table / cound of rows
// rowHeight = $('td').eq(0).height();
tableHeight = 400;
// alert("The Table Height is" + tableHeight);
numberOfRows = document.getElementsByClassName('tableRow').length;
// alert("rows " + numberOfRows);
dynamicCellHeight = (tableHeight / numberOfRows);
// alert("The Cell Height is " + dynamicCellHeight);
cellHeightInt= Number(dynamicCellHeight);
$('td').height(cellHeightInt);
$('td').width(cellHeightInt);
}

Allie · Accepted Answer · 2016-04-22 12:44:03Z

2

When you already have 6 rows and change the size 2, your code will call pass through the else statement, where you do :

for (var i = 0; i < rowsToSubtract; i++) {
     $('.tableRow:nth-child(' + (i+1) +')').remove();
}

You are subtracting 4 rows, so actually the code is executing:

$('.tableRow:nth-child(1)').remove();
$('.tableRow:nth-child(2)').remove();
$('.tableRow:nth-child(3)').remove();
// at this point your table has 3 rows
$('.tableRow:nth-child(4)').remove();

So at the last line, you are trying to remove the fourth line of a table which has 3 rows ... so nothing happens.

You could invert the for loop looping backwards from rowsToSubtract to 0, that would solve your problem. But there are better ways to do this...

Just explaining why it's going wrong here :)

answered Apr 22, 2016 at 12:44

Allie

1,2091 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

got2jam Over a year ago

This makes sense, I agree that there are better ways to solve this. Thank you for your time.

soumasandesu · Accepted Answer · 2016-04-22 12:32:53Z

1

(Concurrent issue?)

for (var i = rowsToSubtract; i > 0; i--) {
    $('.tableRow:nth-child(' + (i) +')').remove();
}

When rows are being subtracted from 8 to 2 (by 6), starting from removing 5th row, you can't do remove since it does not exist.

And yep, the code to remove columns for each row should also be fixed like aforementioned:

for (var j = columnsToSubtract; j > 0; j--) {
    $('.tableColumn:nth-child(' + (i) +')').remove();
}

answered Apr 22, 2016 at 12:32

soumasandesu

3212 silver badges10 bronze badges

1 Comment

got2jam Over a year ago

Thanks for your answer, I see now that the code had nothing to execute!

got2jam · Accepted Answer · 2016-04-22 16:14:31Z

Thank you both very much for your help, it makes sense that what I was was trying to remove items that the code has no reference to and therefor does nothing.

I rewrote the code in a much simpler function to simply redraw the table in a much more concise way.

function drawNewTable(newGridSize){
$('.mainTable').remove();
// Draw New Grid -> Add Table -> Add Rows -> Add Column
$('.tableDiv').append("<table class='mainTable'>")
    for(var i = 0; i < newGridSize; i++){
        $('.mainTable').append("<tr class='tableRow'>");
            for(var j = 0; j < newGridSize; j++){
            $('.tableRow:nth-child(' + (i+1) +')').append("<td class=\"tableColumn\">");
            }
        $('.mainTable').append("</tr>");
    }
$('.tableDiv').append("</table>");
styleTable();
}

Collectives™ on Stack Overflow

Why isn't the JQuery script removing table rows

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related