Question

我正在尝试进行网络开发，我的一个早期项目是创建一个大小可变的网格并响应鼠标事件。

出于某种原因（我确定有一个好的），我改变网格大小的功能并不总是删除所有必要的行。

实施例。将网格大小从10更改为4或从6更改为2时，还有其他行未删除

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);
}

Answer 1

当您已经有6行并更改大小2时，您的代码将通过else语句调用pass，您可以执行以下操作：

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

您正在减去4行，因此实际上代码正在执行：

$('.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();

所以在最后一行，你试图删除一个有3行的表的第四行......所以没有任何反应。

您可以将for循环从rowsToSubtract向后循环反转为0，这将解决您的问题。但是有更好的方法可以做到这一点......

在这里解释为什么会出错：）

Answer 2

（并发问题？）

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

当从8到2（从6）减去行时，从删除第5行开始，您不能删除，因为它不存在。

是的，删除每行的列的代码也应该像前面提到的那样修复：

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

Answer 3

非常感谢你们的帮助，我的意思是试图删除代码中没有引用的项目，因此没有任何帮助。我在一个更简单的函数中重写了代码，以简单的方式重新绘制表格。 function drawNewTable（newGridSize）{ $（＆＃39; .mainTable＆＃39）。除去（）; //绘制新网格 - ＆gt;添加表格 - ＆gt;添加行 - ＆gt;添加列 $（＆＃39; .tableDiv＆＃39;）。追加（＆＃34;＆lt; table class =＆＃39; mainTable＆＃39;＆gt;＆＃34;） for（var i = 0; i＆lt; newGridSize; i ++）{ $（＆＃39; .mainTable＆＃39;）。追加（＆＃34;＆lt; tr class =＆＃39; tableRow＆＃39;＆gt;＆＃34;）; for（var j = 0; j＆lt; newGridSize; j ++）{ $（＆＃39; .tableRow：nth-child（＆＃39; +（i + 1）+＆＃39;）＆＃39;）。追加（＆＃34;＆lt; td class = \＆＃34 ; TableColumn的\＆＃34;＆GT;＆＃34）; } $（＆＃39; .mainTable＆＃39）。追加（＆＃34;＆LT; / TR＆GT;＆＃34）; } $（＆＃39; .tableDiv＆＃39）。追加（＆＃34;＆LT; /表＆gt;＆＃34）; styleTable（）; }

为什么JQuery脚本没有删除表行

3 个答案: