Question

我有两个jquery函数。第一个添加行，第二个添加列。创建我的addColumns函数后，我遇到了这个问题。在添加行之前添加列时，行功能不知道添加了新的tds。有没有一种方法可以创建与addColumns相同的函数，但是不必对每个td的html进行硬编码，而应使用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>");
            });
        }); 
    });

Answer 1

在此示例如何添加列和行，并跟踪列号和行号。

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

Answer 2

可能并不完美，但可能会让您对想要的东西有所了解。只需计算您添加的最后一行的库仑数，然后循环直到最后一行的长度即可。

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

Answer 3

您的逻辑似乎是正确的。只是附近的打字错误

<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+"后遗漏了单引号

jQuery每个向表添加行的函数

3 个答案: