<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>jQuery+JavaScript实现table的增加和减少</title>

<scriptlanguage="javascript"src="jquery-1.7.1.min.js"></script>

</head>

<body>

<tableborder="0"width="800"style="border-collapse:collapse;"id="tb1">

<tr>

<td><inputtype="file"name="pic[]"/></td>

</tr>

</table>

<inputtype="button"id="add"value="+"/><inputtype="button"id="minus"value="-"/><inputtype="button"id="empty"value="清空"/>

<scripttype="text/javascript">

$("#add").click(function(){

$("#tb1").append('<tr><td><inputtype="file"name="pic[]"/></td></tr>');

})

$("#minus").click(function(){

vartbl_rows=Math.round((document.getElementById('tb1').rows.length));

if(tbl_rows>1)dealTableRows('tb1',0,1);

})

$("#empty").click(function(){

$("#tb1").empty();

})

functiondealTableRows(tbl_id,opt,cellnum,str){

vartblObj=document.getElementById(tbl_id);

varnewRow,newCell;

switch(opt){

case1:/*增加一行*/

newRow=tblObj.insertRow(tblObj.rows.length);

for(vari=0;i<cellnum;i++){

newCell=newRow.insertCell(newRow.cells.length);

newCell.innerHTML=str[i];

}

break;

default:

for(varj=0;j<cellnum;j++){

tblObj.deleteRow(tblObj.rows.length-1);

}

break;

}

}

</script>

</body>

</html>