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

fmms 13年前

<!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> 
jQuery+JavaScript 实现 table 的增加和减少