Блог

У меня есть две функции jquery. Первая добавляет строки, а вторая — столбцы. Я столкнулся с этой проблемой после создания моей функции addColumns. Когда я добавляю столбцы перед добавлением строк, функции rows не знают, что добавлены новые tds. Есть ли способ создать ту же функцию, что у меня есть для addColumns, но вместо жесткого кодирования html для каждого td использовать функцию each? Таким образом, моя функция добавления строк будет знать, нужно ли проверять наличие новых tds?

Или, может быть, есть какой-либо более простой подход к этой проблеме, чем тот, которым я занимаюсь…

 $(document).ready(function() {

        var rowCount = $('#main tr').length;
        var tdCount = $("#main tr:first > td").length;
        console.log(tdCount);

        $('.addRow').click(function(){

            var markup = ("<tr>
                            <td id='h-gi-" rowCount "-" 1 "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                            <td id='h-gi-" rowCount "-" 2 "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                            <td id='h-gi-" rowCount "-" 3 "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                            <td id='h-gi-" rowCount "-" 4 "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                            <td id='h-gi-" rowCount "-" 5 "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                            <td id='i-" rowCount " class='h-text'>Enter Initiative" " " rowCount " " "here</td>
                            <td id='h-it-" 1 "-" rowCount "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                            <td id='h-it-" 2 "-" rowCount "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                            <td id='h-it-" 3 "-" rowCount "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                            <td id='h-it-" 4 "-" rowCount "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                            <td id='h-it-" 5 "-" rowCount "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>
                        </tr>");

                $(markup).insertBefore($(".bottom-row"));
                $('tr:last').css("width", "75px");
                $('tr:last').prev().css("text-align", "center");
                rowCount  ;
        });

        $('.addColumn').click(function() {
            $('#main').find('tr').each(function() {
                $(this).find('td').eq(tdCount -1).after("<td id='h-gi-" rowCount "-" 1 "' class='harvey'><img src='../Images/HarveyBalls/harvey-null.svg'/></td>");
            });
        }); 
    });
  

Вот пример того, как вы можете добавлять столбцы и строки и отслеживать номера столбцов и строк.

 $('#addColumn').on('click', function(){
  var $rows = $('#mytable').find('tr');
  
  $rows.each(function(index){
    var colCount = $(this).find('td').length   1;
    
    var $newTd = $('<td>');
    $newTd.text(colCount   '-'   (index   1));
    $(this).append($newTd);
  });
});

$('#addRow').on('click', function(){
  var rowCount = $('#mytable').find('tr').length   1;
  var colCount = $('#mytable').find('tr').first().find('td').length;

  $('#mytable').append('<tr>');
  var $newRow = $('#mytable').find('tr').last();
  
  for(var i = 0 ; i < colCount; i  ) {
    var $newTd = $('<td>');
    $newTd.text((i   1)   '-'   rowCount);
    $newRow.append($newTd);
  }
});  

 #mytable td {
  border: solid 1px black;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
  <tr>
    <td>1-1</td>
    <td>2-1</td> 
    <td>3-1</td>
  </tr>
  <tr>
    <td>1-2</td>
    <td>2-2</td> 
    <td>3-2</td>
  </tr>
</table>

<button id="addColumn">Add Column</button>
<button id="addRow">Add Row</button>  

Может быть, это не идеально, но это может дать вам представление о том, чего вы хотите. просто посчитайте столбцы последней добавленной вами строки, а затем выполняйте цикл до тех пор, пока не достигнете длины в последней строке .

  var cols = $("table").find("tr:last td"); 
$('.addColumn').click(function() {
   var markup = ("<tr>
   for(var i = 0; i < cols.length; i  )
   {
     if(i == 4)
     { 
        "<td id='i-" rowCount " class='h-text'>Enter Initiative" " " rowCount " 
        " "here</td>"
          return; }

        "<td id='h-gi-" rowCount "-" 1 "' class='harvey'><img 
        src='../Images/HarveyBalls/harvey-null.svg'/></td>
   }
</tr>");
  }); 
  

Ваша логика кажется правильной. Просто ошибка опечатки возле строки

 <td id='i-" rowCount " class='h-text'>Enter Initiative" " " rowCount " " "here</td>
  

Измените его на

 <td id='i-" rowCount "' class='h-text'>Enter Initiative" " " rowCount " " "here</td>
  

у вас отсутствует одинарная кавычка после rowCount "