jquery实现html动态表并提交,jQuery+HTML动态表格的实现

动态表格

.div{

width: 95%;

float: left;

margin-top: 30px;

align: center;

margin: 0 auto;

}

.tableStyle

{

display: none;

border-collapse: collapse;

width:50%;

}

td

{

font-size:12px;

height:25px;

border:1px solid #CCD5E8;

}

.btn {

font-size:12pt; color: #003399;

border: 1px #003399 solid;

color:#006699;

border-bottom: #93bee2 1px solid;

border-left: #93bee2 1px solid;

border-right: #93bee2 1px solid;

border-top: #93bee2 1px solid;

background-color: #e8f4ff;

cursor: pointer;

font-style: normal ;

width:80px;

height:22px;

font-family:Verdana;font-family:Georgia;_font-family:Tahoma;

padding:0 10px 1px;padding:3px 3px 1px;_padding:0 4px 1px;

line-height:18px;line-height:14px;_line-height:16px;

}

--请选择--

载重

速度

点击填写参数

操作结果

var rowCount = 1;

var colCount = 2;

// 获取下拉列表的值，以赋上点击事件

window.onload = function () {

var sel = document.getElementsByName("select")[0];

sel.onchange = function () {

var val = this.value;

switch (val){

case "0":

//addCol();

break;

case "1":

addColDL();

break;

case "2":

addColV();

break;

}

}

}

var html='';

//点击出现表格

function showTable() {

document.getElementById("table").style.display = document.getElementById("table").style.display=="none"?"block":"none";

}

//增加载重列

function addColDL(){

colCount++;

$th = $("

载重");

$col = $("

");

$("#table>thead>tr").append($th);

$("#table>tbody>tr").append($col);

}

//增加速度列

function addColV(){

colCount++;

$th = $("

速度");

$col = $("

");

$("#table>thead>tr").append($th);

$("#table>tbody>tr").append($col);

}

//增加行

function addRow(){

rowCount++;

for(var i=0;i

html += '

';

}

var rowTemplate = '

'+html+'';

var tableHtml = $("#table tbody").html();

tableHtml += rowTemplate;

$("#table tbody").html(tableHtml);

html='';

}

//删除行

function delRow(obj){

var res = confirm('确认要删除吗？');

if(res == true)

{

$(obj).parents("tr").remove();

}

rowCount--;

}