Javascript function for adding row to html table does not work

Question

I developed two javascript functions which create a html table (showList4() ) and which add rows (addRow() ), pls see code below. showList4() works fine, but addRow() does not; addRow() adds row, but:

(error 1): the row is not added straight under the previous row, but shifted to the left.

(error 2): executing addRow the second time does not put the row after/under the previously added row, but before/above it.

For adding a row I looked at the solution at Add table row in jQuery but I dont know where I go wrong with the addRow() code?

javascript code:

function showList4(title, wrapper, wrappermethod, tableid){ //this functions works fine

   if((!$('#'+wrapper).length) ){//no action if no info or invalid wrapper agurment type
        return;
   }//if

   var form = '<table id="'+tableid+'">';

   //add title
   if(typeof title === 'string'){
       form += '<caption> '+ title +' </caption>';
   }//if
   form += '<tbody>';
   var nrofrows = arguments.length - 4;
   console.log('Showlist3- nrofrows: '+nrofrows)
   //add following rows with vert labels in first colum and datavalues in following columns
   for(var row=0;row<nrofrows;row++){ //for each following row 
       form += '<tr> <td> ';
       for(var column=0, column_max=arguments[4+row].length;column<column_max;column++){
           if(arguments[4+row] !== undefined){
                form += '<td>' + arguments[4+row][column] + ' </td>';
           }//if
       }//for(var column=0, column_max=labels_hori.length;column<column_max;column++){
       form += '</tr>';
   }//for(var i=0,i_max=labels_hori.length;i<i_max;i++

   form += '<tr><td> </tr></td> </tbody> </table>'; //add empty line and finish table

   switch(wrappermethod){
       case 'html':
           $('#'+wrapper).html(form);
           break;
       default: //no action if invalid wrapper argument
           break;
   };//switch
   return;

};//showList4()

function addRow(tableid,values){
   var form = '<tr>';
   for(var i=0,i_max=values.length;i<i_max;i++){
       form += '<td>' + values[i] + '</td>';
   }//for
   form += '</tr>';

   $('#'+tableid+' > tbody:last').after(form); //reference example code: https://stackoverflow.com/questions/171027/add-table-row-in-jquery
   //$('#'+tableid+' tr:last').after(form); //reference example code: https://stackoverflow.com/questions/171027/add-table-row-in-jquery
   return;
}//addrow


$(document).ready(function(){

        showList4('Title table','myDivid','html','myTable',
                      ['Some text1','Some text2','Some text3','Some text4'],
                      ['1','2','3','4']);

        addRow('myTable',['A','B','C','D']);
        addRow('myTable',['E','F','G','H']);

});//$(document).ready(function(){

html code:

<div id="myDivid" style="width:500px; "> </div>

Why do you say it doesn't work?... I've copy&pasted your code and it works: http://jsfiddle.net/eyanez/JSKXc/ — Eduardo Yáñez Parareda, Feb 20 '14 at 09:49
It works in the sense that the 2 rows with figure are added below the first row. But your jsfiddle also shows that the added rows are down left to the first row, e.g., the letters E and A are not straight under '1'. Also, after row [1,2,3,4] I would/want expect row [A,B,C,D], not [E,F,G,H] as also illustrated by your jsfiddle. — Joppo, Feb 20 '14 at 09:55

score 0 · Accepted Answer · answered Feb 20 '14 at 09:54

There are a few things wrong with your code.

First, you are targeting the "last body tag" rather than the "last row in the body". So change your line

$('#'+tableid+' > tbody:last').after(form);

to

$('#'+tableid+' > tbody > tr:last').after(form);

This will ensure that the new row is inserted within the body of the table.

Second, you are creating an additional cell in your first two rows. See this line

form += '<tr> <td> ';

Change it to

form += '<tr>';

Third, you have broken html on this line

form += '<tr><td> </tr></td> </tbody> </table>'; //add empty line and finish table

Change it to

form += '<tr><td colspan="4"></td></tr></tbody> </table>'; //add empty line and finish table. NOTE the colspan to format the table correctly.

Here is a working version at jsbin

p.s. jsbin suggest some other fixes to missing semi-colons, misuse of the switch statement and unnecessary semi-colons.

once I found jsbin I forgot about jsfiddle :P – Tim B James Feb 20 '14 at 11:08 — Tim B James, Feb 20 '14 at 11:08

Javascript function for adding row to html table does not work

1 Answers1