`
jdlsfl
  • 浏览: 156081 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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[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>
</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>

分享到:
评论

相关推荐

    流程编辑器.zip

    var deleteRows = _task_listener_fields_dg.datagrid('getChanges','deleted'); var changesRows = { inserted : [], updated : [], deleted : [] }; if (insertRows.length&gt;0) { for (var i=0;i...

    table对象中的insertRow与deleteRow使用示例

    代码如下: &lt;!... &lt;head&gt; &lt;title&gt;table1.html&lt;...meta http-equiv=”content-type” content=”text/html; charset=UTF-8″&gt; &lt;!–&lt;link rel=”stylesheet” type=”text/css” hre

    最全的oracle常用命令大全.txt

    where c.owner = upper('&table_owner') and c.table_name = upper('&table_name') and c.owner = cc.owner and c.constraint_name = cc.constraint_name order by cc.position; 8、存储函数和过程 查看函数...

    java连接sqlserver示例

    // 表更新操作,包括insert,update,delete db_manager .executeUpdate("insert into table22 (c1,c2) values('workflow1','engine1')"); db_manager .executeUpdate("insert into table22 (c1,c2...

    SSD7 选择题。Multiple-Choice

    (b) the name of the table, the names of the table's attributes, the data types of the table's attributes, the formats of the table's attributes, and the maximum number of rows that the table can have...

    MySQL中文参考手册.chm

    &lt;br/&gt;7.9 OPTIMIZE TABLE (优化表) 句法 &lt;br/&gt;7.10 DROP TABLE (抛弃表)句法 &lt;br/&gt;7.11 DELETE (删除)句法 &lt;br/&gt;7.12 SELECT (精选)句法 &lt;br/&gt;7.13 JOIN (联接)句法 &lt;br/&gt;7.14 INSERT (插入)句法 &lt;br/&gt;7.15 REPLACE ...

    Oracle事例

    &lt;3&gt;.pctfree(index)=(maximum number of rows-initial number of rows)*100/maximum number of rows &lt;4&gt;.creating reverse key indexes sql&gt; create unique index xay_id on xay(a) reverse pctfree 30 ...

    微软内部资料-SQL性能优化3

    For example, a shared intent lock placed at the table level means that a transaction intends on placing shared (S) locks on pages or rows within that table. Setting an intent lock at the table level ...

    Cassandra的Go开发包GoCqlTable.zip

    // Now that we have a keyspace with a table in it: lets make a few rows! In the base example we had to write out the CQL manually, this time // around, however, we ...

    MYSQL常用命令大全

    摘自:http://www1.xjtusky.com/article/htmldata/2004_12/3/57/article_1060_1.html 在windows中MySql以服务形式存在,在使用前应确保此服务已经启动,未启动可用net start mysql命令启动。而Linux中启动时可用“/...

    购物网站中的购物车源代码

    $query = "INSERT INTO $table (session, product, quantity) VALUES "; $query .= "('$session', '$product', '$quantity') "; mysql_query($query); } else { $quantity += $qty; $query = "UPDATE $...

    MySQL命令大全

     此操作使testuser能够在每一个test数据库中的表执行SELECT,INSERT和DELETE以及UPDATE查询操作。现在我们结束操作并退出MySQL客户程序:  mysql&gt; exit  Bye9! 1:使用SHOW语句找出在服务器上当前存在什么...

    Mysql误删数据解决方案及kill语句原理

    mysql误删数据 使用delete语句误删数据行 使用drop table或者truncate table误删数据表 ... 如果是insert,将binlog event类型是write_rows event改为delete_rows event。 如果是delete则相反。

    鱼肠MSSQL数据库修复软件 v3.3.zip

    行删除修复(用于delete from 误操作): 打开程序后,首先选择MDF文件的数据库版本(SQL7SQL2000 或则 SQL2005 或则 SQL2008),然后 1、点《open mdf file》,选择需要处理的MDF文件 2、点《user tables》,显示...

    我做的会员卡管理系统

    Me.txt_passport.Text = dv.Table.Rows(i)("passport").ToString Me.txt_phone.Text = dv.Table.Rows(i)("phone").ToString Next If Me.txt_num.Text &lt;&gt; "" Then Me.btn_delete.Enabled = True Me....

    微软内部资料-SQL性能优化5

    On a qualified select, update, or delete, the correct leaf page will be the lowest page of the tree in which one or more rows with the specified key or keys reside. A qualified operation is one that ...

    [php]mysql数据库操作——DB类

    header('Content-Type:text/html; charset=utf-8'); basename($_SERVER['PHP_SELF'])=='mysql.inc.php'&&header; ('Location:http://'.$_SERVER['HTTP_HOST']); //禁止直接访问本页 /** ※※※※※※※※※※※※※...

    易语言sql语句生成模块

    易语言sql语句生成模块源码,sql语句生成模块,Select,Update,Insert,Delete,From,Where,OrWhere,Join,Order,Group,Limit,Offset,Page,GetSQL,getColumn,parseColumn,getTable,getCondition,quoteValue,TrimEnd,get...

    sql2000 Log Explorer4.2(含注册码)+汉化

    如果log是delete table where ...的话,生成的文件代码就是insert table .... 你可以通过SQL查询分析器,或者LogExplore的Run SQL Script功能来执行生成脚本. 关于Undo Undo功能可以逆操作一组指定的用户事物。...

    ORCALE语句大全

    select tablespace_name, table_name from user_tables where table_name='emp'; 删除表空间 drop tablespace zhu including contents and datafiles cascade constraints; 10 约束 not null unique primary...

Global site tag (gtag.js) - Google Analytics