色播五月激情综合网,中中文字幕av在线,国产二区不卡

html table insert/delete rows

Deleting table rows
<html>
<head>
<script?type="text/javascript">
function?deleteRow(i){
????document.getElementById('myTable').deleteRow(i)
}
</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>
</body>

</html>

Adding table rows

<html>
<head>
<script?type="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"
}
</script>
</head>

<body>
<table?id="myTable"?border="1">
????<tr>
????????<td>d</td>
????????<td>d</td>
????</tr>
????<tr>
????????<td>d</td>
????????<td>d</td>
????</tr>
????<tr>
????????<td>Row3?cell1</td>
????????<td>Row3?cell2</td>
????</tr>
????<tr>
????????<td>Row4?cell1</td>
????????<td>Row4?cell2</td>
????</tr>
????<tr>
????????<td>Row5?cell1</td>
????????<td>Row5?cell2</td>
????</tr>
</table>
<form>
<input?type="button"?onclick="insRow()"?value="Insert?row">
</form>
</body>

</html>

Inserting/Removing Row Elements
<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")
????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[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>

try this example

posted on 2006-05-21 12:30 record java and net 閱讀(1600) 評論(0) 編輯收藏所屬分類: xml and html

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: Firebug-javascript/css/ajax/dom調試器【這款不錯】 MIME類型 [js小技巧]鼠標移到圖片高亮度顯示 div加個滾動條 js-給你的博客添加一雙眼睛 html Fieldset 標簽 DOM對象簡單使用客戶端表單通用驗證CheckForm ajax自動加載blogjava和博客園的rss ajax讀取blog rss [blogjava-2006-06-30的rss]

blogjava's web log

html table insert/delete rows

導航

常用鏈接

留言簿(44)

新聞檔案

2.動態語言

3.工具箱

9.文檔教程

友情鏈接

搜索

最新評論