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

您只需要检查上一个tr是否已包含4个td，如果是，则创建一个新的tr并附加td其他只是附加td到现有的tr。

这是 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 2

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 3

对此的一个简单解决方法是计算在追加之前最终td中有多少tr个元素。如果已添加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>'); }。试试这个：

＆＃13;

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

＆＃13;

Dim c As String

＆＃13;

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 < / p>

Answer 6

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

如何根据给定的结构

6 个答案: