Jquery Каждая функция для добавления строк в таблицу

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

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

$(document).ready(function() {

        var rowCount = $('#main tr').length;
        var tdCount = $("#main tr:first > td").length;
        console.info(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>");
            });
        }); 
    });

Поделитесь своим html-кодом

— 20.03.2019 15:50

jquery

20.03.2019 15:09

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

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

20.03.2019 15:54

Ответ принят как подходящий

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

$('#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>

20.03.2019 15:55

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

<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+"

20.03.2019 16:00

Другие вопросы по теме

Как настроить пошаговый мастер jquery

Пользовательский слайдер миниатюр Javascript

Почему Firefox говорит, что «событие не определено», хотя в Chrome он отлично работает?

JQuery проверяет динамически созданные формы reCaptcha

Jquery – как выбрать идентификатор строки

Невозможно заполнить элементы с помощью jQuery

Средство выбора даты и времени и средство выбора цвета не работает для динамически созданных

JQuery-подтверждение предотвращения прокрутки на callerElement.hide()

Скрипты нижнего колонтитула не работают в codeigniter

Отображать выбранные флажки визуально для пользователя в отдельном div

Jquery Каждая функция для добавления строк в таблицу

Ответы 3

Другие вопросы по теме

Похожие вопросы