如何根据给定的结构向表中添加新行

Question

我需要动态构造下面的HTML

<tr>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">A<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">B<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">C<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">D<span></span></label></td>
  </tr>
  <tr>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass" >E<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">F<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass" >G<span></span></label></td>
     <td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">H<span></span></label></td>
  </tr>

如您所见，每个 tr 应该只包含 4 列

这是我的代码

虽然最初显示的数据我正在使用这段代码，但它工作正常

<table class="table" id="tagstable">
   <tbody>

   </tbody>
</table>

var myarray = ["A", "B", "C", "D", "E", "F", "G", "H"]
$(document).ready(function()
{
        var html = ''
        for (var i = 0; i < myarray.length; i++)
        {
                html += '<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">' + myarray[i] + '<span></span></label></td>';
                if ((i + 1) % 4 == 0) html += '</tr><tr>';
        }
        $("#tagstable tbody").append('<tr>' + html + '</tr>');
});

但是当用户通过点击添加新标签按钮动态添加新标签时

我无法实现该功能，请告诉我如何按照上述结构显示标签

在下面的小提琴中，可以复制 如果点击添加新标签按钮超过5次

https://jsfiddle.net/dHZS9/717/

请告诉我如何解决这个问题

Answer 1

Jsfiddle Link

 var counter = 0;
function appendToTagstable() {
    var taghtml = '';
    counter ++ ;
    taghtml = '<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox">I<span></span></label></td>';
     $("#tagstable tbody").append(taghtml);
    if(counter% 4 == 0) {
        $("#tagstable tbody").append("</tr><tr>");
    }

    return false;
 }

使用计数器。这将有助于维护您的结构。

Answer 2

您只需要检查您的最后一个tr 是否已经有4 个td，如果是，则创建一个新的tr 并附加td 否则只需将td 附加到现有的最后一个@987654328 @。

这是一个working demo

以下是对您的代码所做的更改。

function appendToTagstable()
{  
    if($('#tagstable tbody tr:last').find('td').length > 3){ //check if tr already has 4 td's
      $('#tagstable tbody').append('<tr></tr>'); // add new tr as the old one already has 4 td's in it
    }   

    var taghtml = '';
    taghtml = '<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox">I<span></span></label></td>';
    $('#tagstable tbody tr:last').append(taghtml); //append td to last tr
    return false;
}

Answer 3

对此的简单解决方法是计算附加前的最终tr 中有多少td 元素。如果已经添加了4，则创建一个新的tr 并附加到它上面。试试这个：

var myarray = ["A", "B", "C", "D", "E", "F", "G", "H"]

$(document).ready(function() {
    var html = ''
    for (var i = 0; i < myarray.length; i++) {
        html += '<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">' + myarray[i] + '<span></span></label></td>';
        if (i + 1 % 4 == 0) 
            html += '</tr><tr>';
    }
    $("#tagstable tbody").append('<tr>' + html + '</tr>');
});

$(document).on("click", ".addTagbtn", function(e) {
    e.preventDefault();
    appendToTagstable();
});

function appendToTagstable() {
    var $lastTr = $('#tagstable tr:last');
    if ($lastTr.find('td').length == 4)
    	$lastTr = $('<tr />').appendTo('#tagstable');
        
    $lastTr.append('<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox">I<span></span></label></td>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="tagstable">
    <tbody>

    </tbody>
</table>

<button type="button" class="btn btn-success addTagbtn">Add new tag</button>

Answer 4

如果你有这个代码，你已经知道你需要做什么 -

if ((i + 1) % 4 == 0) html += '</tr><tr>';

添加更多标签时需要计算当前行的数量，如果达到限制则添加新行

Answer 5

您可以将以下内容添加到appendToTagstable 函数中。

它只是计算最后一个tr中的项目，如果有4个，它会添加另一个。

var items = $("#tagstable tbody tr").last().children().length;
if(items === 4)
{
  $("#tagstable tbody").append('<tr></tr/>');
}

此外，该函数中的行 $("#tagstable tbody").append(taghtml); 应更改为 $("#tagstable tbody tr").last().append(taghtml);，这只是确保您始终将 td 添加到 tr 元素而不是 tbody

Answer 6

试试这个

var myarray = ["A", "B", "C", "D", "E", "F"]

$(document).ready(function(){
	function reload(){
		var html = ''
        for (var i = 0; i < myarray.length; i++){
                html += '<td><label class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">' + myarray[i] + '<span></span></label></td>';
								if ((i + 1) % 4 == 0) html += '</tr><tr>';
        }
        $("#tagstable tbody").append('<tr>' + html + '</tr>');
	}
	reload();
  $(document).on("click", ".addTagbtn", function(event){
  				var getData = prompt("Please enter your alphabet", "");
          if (getData != null) {
          	myarray.push(getData);
            $("#tagstable tbody").html('');
          	reload();
          }else
          	return;
          
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="tagstable">
   <tbody>
    
   </tbody>
</table>
<button type="button" class="btn btn-success addTagbtn">Add new alphabet</button>