xml 代码
- <html>
- <head>
- <script type="text/javascript">
- function deleteRow(i){
- document.getElementById('myTable').deleteRow(i)
- }
- function insRow(){
- var x=document.getElementById('myTable').insertRow(2)
- var y=x.insertCell(0)
- var z=x.insertCell(1)
- y.innerHTML="NEW CELL1"
- z.innerHTML="NEW CELL2"
- }
- </script>
- </head>
- <body>
- <table id="myTable" border="1">
- <tr>
- <td>Row 1</td>
- <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
- </tr>
- <tr>
- <td>Row 2</td>
- <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
- </tr>
- <tr>
- <td>Row 3</td>
- <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
- </tr>
- </table>
- <form>
- <input type="button" onclick="insRow()" value="Insert row">
- </form>
- </body>
- </html>
xml 代码
- <HTML>
- <HEAD>
- <TITLE>Modifying Table Cell Content</TITLE>
- <STYLE TYPE="text/css">
- THEAD {
- background-color: lightyellow;
- font-weight: bold
- }
- TFOOT {
- background-color: lightgreen;
- font-weight: bold
- }
- #myTABLE {
- background-color: bisque
- }
- </STYLE>
- <SCRIPT LANGUAGE="JavaScript">
- var theTable, theTableBody
- function init() {
- theTable = (document.all) ? document.all.myTABLE :
- document.getElementById("myTABLE")
- theTabletheTableBody = theTable.tBodies[0]
- }
- function appendRow(form) {
- insertTableRow(form, -1)
- }
- function addRow(form) {
- insertTableRow(form, form.insertIndex.value)
- }
- function insertTableRow(form, where) {
- var now = new Date()
- var nowData = [now.getHours(), now.getMinutes(), now.getSeconds(),
- now.getMilliseconds()]
- clearBGColors()
- var newCell
- var newRow = theTableBody.insertRow(where)
- for (var i = 0; i < nowData.length; i++) {
- newCell = newRow.insertCell(i)
- newCell.innerHTML = nowData[i]
- newCell.style.backgroundColor = "salmon"
- }
- updateRowCounters(form)
- }
- function removeRow(form) {
- theTableBody.deleteRow(form.deleteIndex.value)
- updateRowCounters(form)
- }
- function insertTHEAD(form) {
- var THEADData = ["Hours","Minutes","Seconds","Milliseconds"]
- var newCell
- var newTHEAD = theTable.createTHead()
- newTHEAD.id = "myTHEAD"
- var newRow = newTHEAD.insertRow(-1)
- for (var i = 0; i < THEADData.length; i++) {
- newCell = newRow.insertCell(i)
- newCell.innerHTML = THEADData[i]
- }
- updateRowCounters(form)
- form.addTHEAD.disabled = true
- form.deleteTHEAD.disabled = false
- }
- function removeTHEAD(form) {
- theTable.deleteTHead()
- updateRowCounters(form)
- form.addTHEAD.disabled = false
- form.deleteTHEAD.disabled = true
- }
- function insertTFOOT(form) {
- var TFOOTData = ["Hours","Minutes","Seconds","Milliseconds"]
- var newCell
- var newTFOOT = theTable.createTFoot()
- newTFOOT.id = "myTFOOT"
- var newRow = newTFOOT.insertRow(-1)
- for (var i = 0; i < TFOOTData.length; i++) {
- newCell = newRow.insertCell(i)
- newCell.innerHTML = TFOOTData[i]
- }
- updateRowCounters(form)
- form.addTFOOT.disabled = true
- form.deleteTFOOT.disabled = false
- }
- function removeTFOOT(form) {
- theTable.deleteTFoot()
- updateRowCounters(form)
- form.addTFOOT.disabled = false
- form.deleteTFOOT.disabled = true
- }
- function insertCaption(form) {
- var captionData = form.captionText.value
- var newCaption = theTable.createCaption()
- newCaption.innerHTML = captionData
- form.addCaption.disabled = true
- form.deleteCaption.disabled = false
- }
- function removeCaption(form) {
- theTable.deleteCaption()
- form.addCaption.disabled = false
- form.deleteCaption.disabled = true
- }
- // housekeeping functions
- function updateRowCounters(form) {
- var sel1 = form.insertIndex
- var sel2 = form.deleteIndex
- sel1.options.length = 0
- sel2.options.length = 0
- for (var i = 0; i < theTableBody.rows.length; i++) {
- sel1.options[i] = new Option(i, i)
- sel2.options[i] = new Option(i, i)
- }
- form.removeRowBtn.disabled = (i==0)
- }
- function clearBGColors() {
- for (var i = 0; i < theTableBody.rows.length; i++) {
- for (var j = 0; j < theTableBody.rows[i].cells.length; j++) {
- theTableBody.rows[i].cells[j].style.backgroundColor = ""
- }
- }
- }
- </SCRIPT>
- </HEAD>
- <BODY onLoad="init()">
- <H1>
- Modifying Tables
- </H1>
- <HR>
- <FORM NAME="controls">
- <FIELDSET>
- <LEGEND>
- Add/Remove Rows
- </LEGEND>
- <TABLE WIDTH="100%" CELLSPACING=20>
- <TR>
- <TD>
- <INPUT TYPE="button" VALUE="Append 1 Row"
- onClick="appendRow(this.form)">
- </TD>
- <TD>
- <INPUT TYPE="button" VALUE="Insert 1 Row"
- onClick="addRow(this.form)">
- at index:
- <SELECT NAME="insertIndex">
- <OPTION VALUE="0">
- 0
- </SELECT>
- </TD>
- <TD>
- <INPUT TYPE="button" NAME="removeRowBtn" VALUE="Delete 1 Row"
- DISABLED onClick="removeRow(this.form)">
- at index:
- <SELECT NAME="deleteIndex">
- <OPTION VALUE="0">
- 0
- </SELECT>
- </TD>
- </TR>
- </TABLE>
- </FIELDSET>
- <FIELDSET>
- <LEGEND>
- Add/Remove THEAD and TFOOT
- </LEGEND>
- <TABLE WIDTH="100%" CELLSPACING=20>
- <TR>
- <TD>
- <INPUT TYPE="button" NAME="addTHEAD" VALUE="Insert THEAD"
- onClick="insertTHEAD(this.form)">
- <BR>
- <INPUT TYPE="button" NAME="deleteTHEAD" VALUE="Remove THEAD"
- DISABLED onClick="removeTHEAD(this.form)">
- </TD>
- <TD>
- <INPUT TYPE="button" NAME="addTFOOT" VALUE="Insert TFOOT"
- onClick="insertTFOOT(this.form)">
- <BR>
- <INPUT TYPE="button" NAME="deleteTFOOT" VALUE="Remove TFOOT"
- DISABLED onClick="removeTFOOT(this.form)">
- </TD>
- </TR>
- </TABLE>
- </FIELDSET>
- <FIELDSET>
- <LEGEND>
- Add/Remove Caption
- </LEGEND>
- <TABLE WIDTH="100%" CELLSPACING=20>
- <TR>
- <TD>
- <INPUT TYPE="button" NAME="addCaption" VALUE="Add Caption"
- onClick="insertCaption(this.form)">
- </TD>
- <TD>
- Text:
- <INPUT TYPE="text" NAME="captionText" SIZE=40
- VALUE="Sample Caption">
- <TD>
- <INPUT TYPE="button" NAME="deleteCaption" VALUE="Delete Caption"
- DISABLED onClick="removeCaption(this.form)">
- </TD>
- </TR>
- </TABLE>
- </FIELDSET>
- </FORM>
- <HR>
- <TABLE ID="myTABLE" CELLPADDING=10 BORDER=1>
- <TBODY>
- </TABLE>
- </BODY>
- </HTML>