html中jquery创建表格,jQuery创建表格

创建表格

table{

border:#0099FF 1px solid;

width:600px;

border-collapse:collapse;

}

table td{

border:#0099FF 1px solid;

padding:10px 20px 3px 1px;

}

//创建单行单列的表格

function createTable(){

/*$("#tab").append(

$("

我是td

")

);*/

//创建表格table元素

var $tab=$("

");

//创建表格tr行元素

var $tr=$("

");

//创建td单元格元素

var $td=$("

");

$td.html("一行一列的表格");

//将td单元格添加到表格行tr上

$tr.append($td);

//将tr表格行添加到table表格上

$tab.append($tr);

//将创建好的整个table挂载到div上

$("#tab").append($tab);

$("#tab").append("
");

}

//创建单行6列的表格

function createTable4(){

//创建表格table元素

var $tab=$("

");

//创建表格tr行元素

var $tr=$("

");

for(var i=0;i<6;i++)

{

//创建td单元格元素

var $td=$("

");

$td.html("单元格");

//将td单元格添加到表格行tr上

$tr.append($td);

}

//将tr表格行添加到table表格上

$tab.append($tr);

//将创建好的整个table挂载到div上

$("#tab").append($tab);

$("#tab").append("
");

}

//创建5行6列的表格

function createTable2(){

//创建表格table元素

var $tab=$("

");

for(var j=0;j<5;j++)

{

//创建表格tr行元素

var $tr=$("

");

for(var i=0;i<6;i++)

{

//创建td单元格元素

var $td=$("

");

$td.html("单元格");

//将td单元格添加到表格行tr上

$tr.append($td);

}

//将tr表格行添加到table表格上

$tab.append($tr);

}

//将创建好的整个table挂载到div上

$("#tab").append($tab);

$("#tab").append("
");

}

//创建指定行和列的表格

function createTable3(){

//获取用户所输入的行数

var rows=$("#row").val();

//获取用户所输入的列数

var cols=$("#col").val();

//创建表格table元素

var $tab=$("

");

for(var j=0;j

{

//创建表格tr行元素

var $tr=$("

");

for(var i=0;i

{

//创建td单元格元素

var $td=$("

");

$td.html("单元格");

//将td单元格添加到表格行tr上

$tr.append($td);

}

//将tr表格行添加到table表格上

$tab.append($tr);

}

//将创建好的整个table挂载到div上

$("#tab").append($tab);

$("#tab").append("
");

}

行数:

列数: