jQuery+JavaScript 实现 table 的增加和减少
fmms
12年前
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery+JavaScript 实现 table 的增加和减少</title> <script language="javascript" src="jquery-1.7.1.min.js"></script> </head> <body> <table border="0" width="800" style="border-collapse:collapse;" id="tb1"> <tr> <td><input type="file" name="pic[]" /></td> </tr> </table> <input type="button" id="add" value="+" /> <input type="button" id="minus" value="-" /> <input type="button" id="empty" value="清空" /> <script type="text/javascript"> $("#add").click(function(){ $("#tb1").append('<tr><td><input type="file" name="pic[]" /></td></tr>'); }) $("#minus").click(function(){ var tbl_rows = Math.round((document.getElementById('tb1').rows.length)); if(tbl_rows>1) dealTableRows('tb1', 0, 1); }) $("#empty").click(function(){ $("#tb1").empty(); }) function dealTableRows(tbl_id, opt, cellnum, str){ var tblObj = document.getElementById(tbl_id); var newRow,newCell; switch(opt){ case 1:/* 增加一行 */ newRow = tblObj.insertRow(tblObj.rows.length); for(var i=0; i<cellnum; i++){ newCell = newRow.insertCell(newRow.cells.length); newCell.innerHTML = str[i]; } break ; default : for(var j=0;j<cellnum;j++){ tblObj.deleteRow(tblObj.rows.length-1); } break ; } } </script> </body> </html> 