Почему скрипт JQuery не удаляет строки таблицы

Я пытаюсь использовать его в веб-разработке, и одним из моих ранних проектов является создание сетки, изменяемой по размеру и отвечающей за события мыши.Почему скрипт JQuery не удаляет строки таблицы

По какой-то причине (я уверен, что есть хороший), моя функция изменить размер сетки не всегда удаляет все необходимые строки.

Ex. При изменении размера сетки от 10 до 4, или 6 до 2, существуют дополнительные строки, которые не удалены

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

источник

2016-04-22 got2jam

Спасибо вам обоим очень много для вашей помощи, это имеет смысл, что я пытался удалить элементы, код не имеет никакого отношения к этому и поэтому ничего не делает.

Я переписал код в гораздо более простой функции, чтобы просто перерисовать таблицу гораздо более сжатым способом.

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

источник

2016-04-22 16:14:31 got2jam

(Параллельная проблема?)

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

источник

2016-04-22 12:32:53

Спасибо за ваш ответ, теперь я вижу, что в коде ничего не было! – got2jam

Когда у вас уже есть 6 строк и изменить размер 2, ваш код будет вызывать проходить через заявление еще , где вы делаете:

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

Итак, на последней строке вы пытаетесь удалить четвертую строку таблицы с тремя строками ... так что ничего не происходит.

Вы можете инвертировать цикл for, обратный назад от rowsToSubtract до 0, что решит вашу проблему. Но есть лучшие способы сделать это ...

Просто объяснить, почему это происходит не так здесь :)

источник

2016-04-22 12:44:03 Allie

Это имеет смысл, я согласен, что есть лучшие способы решить эту проблему. Спасибо за ваше время. – got2jam

Почему скрипт JQuery не удаляет строки таблицы

ответ

Смежные вопросы