CODEWITHSUNDEEP
javascriptjqueryhtml
Indie Rogue
Indie Rogue

Reputation: 13

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

Upvotes: 0

Views: 347

Answers (3)

Wesley Smith
Wesley Smith

Reputation: 19571

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>

Upvotes: 0

Twisty
Twisty

Reputation: 30893

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

Upvotes: 1

jonathanGB
jonathanGB

Reputation: 1540

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

Upvotes: 0

Related Questions