Indie Rogue February 2016

Adding table rows and cells

I tried to make the page add rows and five cells to each table, however I'm having some problems. I appended the row first to the table then followed by looping through the and adding five cells to each row, however whenever I ran it in my web browser it produced this:

this.

I want the cells to be a child of the table row.

function addRows(ramnt) {
  if(ramnt > 0){
    var cellcount = 5;
    var tccount = 0;
    table.append('<tr>');
    console.log('Appended <tr>');
    while(tccount < cellcount){
        tccount = tccount + 1;
        table.append('<td id="Cell-' + tccount  + '" class="gencell"></td>');
    } 
    if (tccount = cellcount){
      table.append('</tr>');
      ramnt = ramnt - 1;
      addRows(ramnt);
    }
  }
}

console.log('Working');
var table = $('Table');
addRows(5);

Answers


Jonathan February 2016

When you call table.append('<tr>'), jQuery inserts both opening and closing tags. I tried this:

enter image description here

Then you call table.append('<td id="Cell-' + tccount + '" class="gencell"></td>');, which appends the td element at the end of the table, so it goes after the tr you appended before.

What you need to do is insert the tr as you did, but then select this tr and append into it. So something like this: table.find('tr:last').append('<td id="Cell-' + tccount + '" class="gencell"></td>');


Twisty February 2016

I would advise making your function a little more dynamic. Here is what I would suggest:

function addRows(rc, to) {
  if(rc > 0){
    var cellcount = 5;

    for(var i = 0; i < rc; i++){
        var row = $("<tr>", { id: "Row-" + i });
        for(var c = 0; c < cellcount; c++){
            row.append("<td id='Cell-" + c + "' class='gencell'></td>");
        }
        to.append(row);
        console.log("Row " + i + " created");
    }
    return true;
  } else {
    return false;
  }
}

Then you can pass the Number of Rows and the Table Object like so:

addRows(5, $("table"));

As I said, I would advise setting your table like so:

<table id="myTable"></table>

This way if you later add another table or do something differnt, you can still use the same code:

addRows(5, $("#myTable"));

Working Example: https://jsfiddle.net/Twisty/Lysr2n5v/

You can take a bit further to write to function to accept X number of Rows, N number of Cells per Row, and the table Object: https://jsfiddle.net/Twisty/Lysr2n5v/2/

function addRows(rc, cc, to) {
  if(rc > 0){
    for(var i = 0; i < rc; i++){
        var row = $("<tr>", { id: "Row-" + i });
        for(var c = 0; c < cc; c++){
            row.append("<td id='Cell-" + c + "' class='gencell'></td>");
        }
        to.append(row);
        console.log("Row " + i + " created");
    }
    return true;
  } else {
    return false;
  }
}


DelightedD0D February 2016

You need to create a row, append all the columns to that row, then append the row to the table like below.

I would also recommend adding logic to check the number of columns already present in the table and make sure you dont add more than are there now as that would not be valid.

With the below:

addRows(5,5) - will add 5 rows to every table on the page where each row will the same number of columns as the table currently has or 5 columns if the table doesnt currently have any columns

addRows(5,5,'#myTable') - will add 5 rows to the table with the id myTable where each row will the same number of columns as the table currently has or 5 columns if the table doesnt currently have any columns

function addRows(rowCount, colCount, table) {
    var $tables= table ? $(table) : $('table');
    $tables.each(function(){
      console.log('table');
      $this=$(this);
      colCount =$this.find('tr:eq(0)').find('td').length || colCount // limit the number of added cols to the numer already present
    	for(r=0;r<rowCount;r++){
         var $row=$('<tr>');
         for(c=0;c<colCount;c++){
            $row.append('<td>');
         }
         $this.append($row);
      }
    });
}
addRows(5,5);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1"></table>
<br>
<br>
<br>
<br>
<br>

<table border="1"><tr>
  <td>some content</td>
  <td>some content</td>
  <td>some content</td>
</tr></table>


zer00ne February 2016

Usage

addCells(table, rows, cells); - table: A string of a table's id. (ex. addCells('dataTable1',...)) - rows: An integer of how many rows to append to table. (ex. addCells('dataTable1', 3,...)) - cells: An integer of how many cells per row. (ex. addCells('dataTable1', 3, 5))

Each row and cell will have a unique id, unless you have more than one table with the same id (which is strongly frowned upon):

  • Row: table id+R+ row number (ex. #dataTableR4 is row 5 of #dataTable)
  • Cell: table id+R+ row number +C+ cell number (ex. #dataTableR4C7 is cell 8 of row 5 of #dataTable )

The problem with your code was this:

table.append('<td id="Cell-' + tccount + '" class="gencell"></td>');

You need to append any <td> to a <tr>

for loops are a better choice the majority of the time. In this demo, there's two of them: first one is for the rows and the second one is for the cells for that each row.

In this demo there's a form to make testing easy.

$(function() {
  $('#btn1').click(function(e) {
    var table = $("#inp0").val();
    var rows = $("#inp1").val();
    var cells = $("#inp2").val();
    addCells(table, rows, cells);
  });



  function addCells(table, rows, cells) {
    var T = $(document).find('#' + table);
    var R = parseInt(rows);
    var C = parseInt(cells);
    for (var i = 0; i < R; i++) {
      T.append('<tr id="' + table + 'R' + i + '"></tr>');
      console.log('Appended: row ' + table + 'R' + i);
      var rowID = T.find('tr#' + 

Post Status

Asked in February 2016
Viewed 3,326 times
Voted 13
Answered 4 times

Search




Leave an answer