Question

我开发了两个javascript函数，它们创建了一个html表（showList4（））并添加了行（addRow（）），请参阅下面的代码。 showList4（）工作正常，但addRow（）没有; addRow（）添加了行，但是：

（错误1）：该行未直接添加到上一行下方，而是向左移动。

（错误2）：第二次执行addRow不会将行放在先前添加的行之后/之下，而是放在它之上/之上。

为了添加一行，我查看了Add table row in jQuery处的解决方案，但是我不知道addRow（）代码出了什么问题？

javascript代码：

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代码：

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

Answer 1

您的代码存在一些问题。

首先，您的目标是“最后一个身体标记”，而不是“身体的最后一行”。所以改变你的行

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

到

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

这将确保新行插入表格的body。

其次，您在前两行中创建了一个附加单元格。见这一行

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

将其更改为

form += '<tr>';

第三，你在这一行打破了html

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

将其更改为

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

以下是jsbin

的工作版本

P.S。 jsbin建议对缺少的分号，错误使用switch语句和不必要的分号进行一些其他修复。

用于向html表添加行的Javascript函数不起作用

1 个答案: