通过Javascript函数动态创建表并向表中添加单元格

时间:2013-08-20 07:50:26

标签: javascript html function dynamic

我想知道如何用for循环创建一个函数,为另一个循环调用创建新的单元格/行。该函数应该返回newRow,它应该是指定数量的单元格。这个想法是html代码每行显示3个图像,但如果只有2个图像,那么它只需要2个单元格。这是第一个if / else语句。

到目前为止,这是代码..

 var cells = document.getElementsByTagName('td');
 var cell = '<td>' + cells[0].innerHTML + '</td>';
 //console.log(cell);


 document.getElementById('searchBtn').onclick = search;

 //specified as 3 per row
 var NUMPERROW = 3;

 //gets number from form text input
 var num = document.getElementById("searchtxt").value;

 function search(){

//var num = 4;

console.log(num);

//loop once per row
var htmlStr = '';
for (var i = 0; i < num; i = i + NUMPERROW){

    //htmlStr += '<tr>' + cell + cell + cell + '</tr>;
    if (num - i >= NUMPERROW) {

        //displays a new row of 3 
        htmlStr += newRow(NUMPERROW);

    }else { //less then 3 to display

        htmlStr += newRow(num - i);
    }


} 
document.getElementById('thumbnails').innerHTML = htmlStr;


}
/*
*Returns the html for a new row.
* numToAdd: the number of cells to add for this row.
*
*/
//this function i do not know how to write

function newRow(cellsToAdd){

 /////?????????? should be a for loop return new Row for the for loop above

}

}

1 个答案:

答案 0 :(得分:1)

如果您不想传递可以离开content的值,这是一个简单的函数。

function newRow(numberOfCells, content)
{
var result = '<tr>';
for(var i = 0; i < numberOfCells; i++)
    result += '<td>' + content[i] + '</td>';
result += '</tr>';
return result;
}