How to add new row to table as per the given structure

Question

I need to construct the following HTML dynamically

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

As you can see each tr should contain only 4 columns

This is my code

While Initially showing the data i am using this piece of code and this is working fine

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

But when a user adds a new tag dynamically by clicking on Add New Tag button

I couldn't able to achive that functionality , could you please let me know how to display tags as per the above structure

In the below fiddle ,this can be reproduced if clicked on Add new tag button more than 5 times

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

Could you please let me know how to resolve this

score 1 · Answer 1 · answered Oct 06 '16 at 10:52

You just need to check if your last tr already has 4 td in it, If yes then create a new tr and append the td else just append the td to existing last tr.

Here is a working demo

Below is the changes that was done to your code.

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

Hi, could you please check this http://stackoverflow.com/questions/41356246/how-to-add-css-transform-to-the-current-transform-value-using-jquery — , Dec 30 '16 at 06:55

score 1 · Accepted Answer · answered Oct 06 '16 at 10:53

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

Use counter for it. It will help to maintain your structure.

score 1 · Answer 3 · answered Oct 06 '16 at 10:55

A simple fix to this would be to count how many td elements are in the final tr before the append. If there are already 4 added, create a new tr and append to that. Try this:

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>

score 0 · Answer 4 · answered Oct 06 '16 at 10:46

0

You already know what you need to do given you have this code -

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

You need to count how many is the current row when adding more tags and add a new row if you have met your limit

answered Oct 06 '16 at 10:46

andy mccullough

9,070
6
32
55

score 0 · Answer 5 · answered Oct 06 '16 at 10:56

You could add the following to the appendToTagstable function.

It simply counts the items in the last tr and then if there are 4, it will add another one.

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

In addition the line in that function $("#tagstable tbody").append(taghtml); should be changed to $("#tagstable tbody tr").last().append(taghtml); which just ensures you are always adding a td to a tr element and not a tbody

score 0 · Answer 6 · edited Oct 06 '16 at 11:28

try this

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>

How to add new row to table as per the given structure

6 Answers6