为什么 JQuery 脚本不删除表行

Why isn't the JQuery script removing table rows

本文关键字：删除 JQuery 脚本 为什么      更新时间：2023-09-26

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

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

前任。将网格大小从 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);
}

当你已经有 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，这将解决您的问题。但是有更好的方法可以做到这一点...

只是解释为什么这里会出错:)

（并发问题？ 

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

非常感谢你们的帮助，我试图删除代码没有引用的项目是有道理的，因此什么也没做。

我用一个更简单的函数重写了代码，以更简洁的方式简单地重新绘制表格。

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();
}
相关文章：