html table insert/delete rows

阅读更多

Deleting table rows
<html>

"text/javascript">
function deleteRow(i){
    document.getElementById('myTable').deleteRow(i)
}



<body>
"myTable" border="1">

  Row 1
  "button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)">


  Row 2
  "button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)">


  Row 3
  "button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)">


body>

html>



Adding table rows

<html>

"text/javascript">
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"
}



<body>
"myTable" border="1">
    
        d
        d
    
    
        d
        d
    
    
        Row3 cell1
        Row3 cell2
    
    
        Row4 cell1
        Row4 cell2
    
    
        Row5 cell1
        Row5 cell2
    

<form>
"button" onclick="insRow()" value="Insert row">
form>
body>

html>

Inserting/Removing Row Elements
<HTML>

Modifying Table Cell Content
"text/css">
THEAD {background-color:lightyellow; font-weight:bold}
TFOOT {background-color:lightgreen; font-weight:bold}
#myTABLE {background-color:bisque}

<SCRIPT LANGUAGE="JavaScript">
var theTable, theTableBody
function init() {
    theTable = (document.all? document.all.myTABLE : 
        document.getElementById("myTABLE")
    theTableBody = 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[inew Option(i, i)
        sel2.options[inew 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>

<BODY onLoad="init()">

Modifying Tables




"controls">

Add/Remove Rows
"100%" CELLSPACING=20>
"button" VALUE="Append 1 Row" 
    onClick="appendRow(this.form)">
"button" VALUE="Insert 1 Row" onClick="addRow(this.form)"> at index: 
    "insertIndex">
        "0">0
    
"button" NAME="removeRowBtn" VALUE="Delete 1 Row" DISABLED 
    onClick="removeRow(this.form)"> at index: 
    "deleteIndex">
        "0">0
    




Add/Remove THEAD and TFOOT
"100%" CELLSPACING=20>
"button" NAME="addTHEAD" VALUE="Insert THEAD" 
    onClick="insertTHEAD(this.form)">

    "button" NAME="deleteTHEAD" VALUE="Remove THEAD" DISABLED 
        onClick="removeTHEAD(this.form)">

"button" NAME="addTFOOT" VALUE="Insert TFOOT" 
    onClick="insertTFOOT(this.form)">

    "button" NAME="deleteTFOOT" VALUE="Remove TFOOT" DISABLED 
        onClick="removeTFOOT(this.form)">





Add/Remove Caption
"100%" CELLSPACING=20>
"button" NAME="addCaption" VALUE="Add Caption" 
    onClick="insertCaption(this.form)">
Text: "text" NAME="captionText" SIZE=40 VALUE="Sample Caption">
"button" NAME="deleteCaption" VALUE="Delete Caption" DISABLED 
    onClick="removeCaption(this.form)">






"myTABLE" CELLPADDING=10 BORDER=1>


BODY>
HTML>

你可能感兴趣的:(HTML,JavaScript,CSS,J#)