jQuery+JavaScript 实现 table 的增加和减少

来源：互联网发布：优盘加密软件下载编辑：程序博客网时间：2024/06/14 01:22

<!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>

效果预览：