动态表格
来源：互联网 发布：yum安装lnmp环境搭建 编辑：程序博客网 时间：2024/04/30 10:15
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Table Cell Fun</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <table id="table1" border="1"> <tr id="row1"> <td id="cell1">Cell 1</td> <td id="cell2">Cell 2</td> </tr> <tr id="row2"> <td id="cell3">Cell 3</td> <td id="cell4">Cell 4</td> </tr> </table> <script type="text/javascript"> <!-- var theTable = document.getElementById("table1"); function doRowInsert(row) { var rowNumber = parseFloat(row); if ((rowNumber >= 0) && (rowNumber <= theTable.rows.length)) theTable.insertRow(rowNumber); } function doCellInsert(row,column) { var rowNumber = parseFloat(row); var colNumber = parseFloat(column); var numberRowsInTable = theTable.rows.length; if ((rowNumber >= 0 ) && (colNumber >= 0)) { if (rowNumber >= numberRowsInTable) { alert("Can't add beyond defined rows"); return; } if (colNumber > theTable.rows[rowNumber].cells.length) { alert("Can't add more than one beyond columns"); return; } var newtd = theTable.rows[rowNumber].insertCell(colNumber); newtd.innerHTML = "<input type='text' name='tdinput' value='NEW TD'>"; } } function doCellModification(row,column,newValue) { var rowNumber = parseFloat(row); var colNumber = parseFloat(column); var numberRowsInTable = theTable.rows.length; if ((rowNumber >= 0 ) && (colNumber >= 0)) { if (rowNumber >= numberRowsInTable) { alert("Can't modify cells outside the table"); return; } if (colNumber >= theTable.rows[rowNumber].cells.length) { alert("Can't modify cells outside the table"); return; } theTable.rows[rowNumber].cells[colNumber].innerHTML = newValue; } } function doCellDelete(row,column) { var rowNumber = parseFloat(row); var colNumber = parseFloat(column); var numberRowsInTable = theTable.rows.length; if ((rowNumber >= 0 ) && (colNumber >= 0)) { if (rowNumber >= numberRowsInTable) { alert("Can't delete beyond defined rows"); return; } if (colNumber >= theTable.rows[rowNumber].cells.length) { alert("Can't delete beyond the column"); return; } theTable.rows[rowNumber].deleteCell(colNumber); } } function doRowDelete(row){var rowNumber = parseFloat(row); var numberRowsInTable = theTable.rows.length;if (rowNumber >= numberRowsInTable) { alert("Can't delete beyond defined rows"); return; } else { theTable.rows[rowNumber].removeNode(true); numberRowsInTable--; } } //--> </script> <form name="testForm" id="testForm" action="#" method="get"> Row #: <input type="text" name="rowtoinsert" id="rowtoinsert" size="2" maxlength="2" value="1" /> <input type="button" value="Insert Row" onclick="doRowInsert(document.testForm.rowtoinsert.value);" /><br /> Row #: <input type="text" name="insertionRow" id="insertionRow" size="2" maxlength="2" value="0" /> Column #: <input type="text" name="insertionColumn" id="insertionColumn" size="2" maxlength="2" value="0" /> <input type="button" value="Insert Cell" onclick="doCellInsert(document.testForm.insertionRow.value,document.testForm. insertionColumn.value);" /><br /> Row #: <input type="text" name="modifyRow" id="modifyRow" size="2" maxlength="2" value="0" /> Column #: <input type="text" name="modifyColumn" id="modifyColumn" size="2" maxlength="2" value="0" /> New Contents: <input type="text" name="newContents" id="newContents" size="20" maxlength="20" value="" /> <input type="button" value="Modify Cell Contents" onclick="doCellModification(document.testForm.modifyRow.value,document.testForm. modifyColumn.value,document.testForm.newContents.value);" /><br /> Row #: <input type="text" name="deletionRow" id="deletionRow" size="2" maxlength="2" value="0" /> Column #: <input type="text" name="deletionColumn" id="deletionColumn" size="2" maxlength="2" value="0" /> <input type="button" value="Delete Cell" onclick="doCellDelete(document.testForm.deletionRow.value,document.testForm. deletionColumn.value);" /><br /> Row #: <input type="text" name="deletRow" id="deletRow" size="2" maxlength="2" value="0" /><input type="button" value="Delete ROW" onclick="doRowDelete(document.testForm.deletRow.value);" /><br /> </form> </body> </html>
