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

html table insert/delete rows

HTMLJavaScriptCSSJ# 
阅读更多

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>

分享到：
| JavaEye论坛热点推荐－2008年11月
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Control_maximum_number_of_rows_in_a_table.zip

    标题"Control_maximum_number_of_rows_in_a_table.zip"提示我们关注如何限制表中记录的数量。描述中提到的情况是特定场景的应用，即可能希望对特定业务规则进行限制，比如每个订单的订单行数不超过三个。 首先，...

    JS动态添加、删除Table行排序（删除整行、删除整列）

    在JavaScript中，`insert`和`delete`方法并不直接应用于HTML表格元素。上述代码片段展示了如何通过创建和删除DOM元素来模拟这些操作。`innerHTML`可以用于插入或替换表格的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使用示例

    在HTML文档中，`&lt;table&gt;`元素用于创建表格，它包含了一系列与表格相关的行`&lt;tr&gt;`、单元格`&lt;td&gt;`等元素。在JavaScript中，我们可以通过DOM操作来动态地对表格进行增删改查。本文将详细介绍如何使用`table`对象的`...

    用数据管道优化AdaptiveServerAnywhere数据库.pdf

    根据需要选择合适的数据管道操作模式，比如“Refresh & Delete/Insert Rows”来清空并重新填充数据。 5. **验证数据完整性**：完成数据传输后，需要验证目的数据库中的数据是否完整无误，确保所有数据都已正确传输...

    最全的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、存储函数和过程 查看函数...

    Oracle Table Form Trigger

    触发器是一种数据库对象，它在特定的数据库事件发生时自动执行，如INSERT、UPDATE、DELETE操作。Oracle表触发器可以增强表格的功能，允许在数据更改前或后执行额外的操作，如验证数据、更新相关记录或记录审计信息。...

    iOS tableview 的使用

    你可以使用`reloadData()`或`insert/delete/Move Rows and Sections`的方法来实时刷新视图。 3. **Performance**：为了优化性能，可以使用`NSFetchedResultsController`与Core Data一起使用，自动处理数据的添加、...

    oracle的开发需要的sql语句集锦

    - `CREATE TRIGGER trigger_name BEFORE/AFTER INSERT/UPDATE/DELETE ON table_name FOR EACH ROW ...`：定义在特定事件（如INSERT、UPDATE、DELETE）发生时自动执行的代码。 11. **索引（Indexes）**： - `...

    Temp-Table-In-Oracle.rar_TEMP TABLE orac_Table_oracle ppt

    这里，`ON COMMIT PRESERVE ROWS` 或 `ON COMMIT DELETE ROWS` 决定了会话结束时临时表数据的行为。前者在提交事务后保留数据，后者则会删除所有行。 2. **使用场景**: - **多步骤操作**：在执行一系列复杂的操作...

    java连接sqlserver示例

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

    PHP中mysqli_affected_rows作用行数返回值分析

    首先，mysqli_affected_rows函数用于获取上一次执行INSERT、UPDATE或DELETE操作后受影响的行数。这在很多情况下是非常有用的，比如在进行批量更新或删除操作后，开发者通常需要知道有多少行数据被修改了。 该函数的...

    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...

    Oracle存储过程中使用临时表

    创建事务级临时表的语法与会话级类似，只需将`ON COMMIT DELETE ROWS`替换为`ON COMMIT PRESERVE ROWS`，如下所示： ```sql CREATE GLOBAL TEMPORARY TABLE temp_table ( column1 datatype, column2 datatype, .....

    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 ...

    go mysql 多种方法数据操作

    rows, err := db.Query("SELECT * FROM table") // ... // 插入 result, err := db.Exec("INSERT INTO table (col1, col2) VALUES (?, ?)", val1, val2) // ... ``` 2. **使用ORM库，如Gorm** Gorm是一个...

    oracle常用语句大全

    CREATE TRIGGER trigger_name BEFORE/AFTER INSERT/UPDATE/DELETE ON table_name FOR EACH ROW BEGIN ... END; 删除触发器可以使用以下命令： DROP TRIGGER trigger_name; 七、函数管理 Oracle 中的函数管理包括...

    SQL Server 2012 Transact-SQL DML Reference

    - `SELECT column_name, SUM(column_name) OVER (ORDER BY column_name ROWS BETWEEN 1 PRECEDING AND CURRENT ROW) AS rolling_sum FROM table_name;` #### Table Value Constructor 表值构造器用于创建临时表，...

    GO连接mysql

    - `db.Exec()`用于执行INSERT、UPDATE、DELETE等非查询语句，它返回一个`sql.Result`，你可以从中获取受影响的行数等信息。 以下是一些例子： ```go // 查询 rows, err := db.Query("SELECT * FROM tablename") if...

Magicbox
Global site tag (gtag.js) - Google Analytics