<html>
<head>
<title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
<script language="javascript">
//add a new row to the table
function addRow()
{
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("tblGrid").insertRow();
//add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
var oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t1'>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t2'>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t3'> <input type='button' value='Delete' onclick='removeRow(this);'/>";
}
//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentElement.parentElement;
//once the row reference is obtained, delete it passing in its rowIndex
document.all("tblGrid").deleteRow(oRow.rowIndex);
}
function deleteAllRow(){
var table = document.getElementById("tblGrid");
var len = table.rows.length;
for(var i = len-1;i >0;i--){
table.deleteRow(i);
}
}
</script>
</head>
<body>
Demo of a simple table grid that allows adding and deleting rows using DHTML
and Javascript
<p/>
Try it out - Click on the Delete button to delete the corresponding row. Click Add Row button to insert a new row.
<p/>
<p/>Browser compatility - this sample has been tested to work with IE5.0 and above.
<p/>
<hr>
<!-- sample table grid with 3 columns and 4 rows that are presented by default -->
<table id="tblGrid" style="table-layout:fixed;" border="1" width="200" cellspacing="0" cellpadding="0" style= "border:1px solid #000000;">
<tr>
<td width="150px">Field1</td>
<td width="150px">Field2</td>
<td width="250px">Field3</td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> <input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> <input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> <input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td><input type="text" name="t3" /> <input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>
</table>
<hr>
<input type="button" value="Add Row" onclick="addRow();" />
<br/>
<input type="button" value="remove All Row" onclick="deleteAllRow();" />
<hr>
<a href='http://www.interviewboard.com'>Interviewboard - Interview Questions and Answers on ASP.NET, C#, SQL, Oracle and more....</a>
</body>
</html>
<table border="0" width="200" cellspacing="1" cellpadding="0" style= "border:1px solid #000000;"
>
<tr align="center"> <td >细</td> <td >表</td> </tr>
<tr align="center" > <td >线</td> <td >格</td> </tr>
</table>
分享到：
相关推荐
在“createtable.html”这个文件中，很可能包含了实际的示例代码，演示了如何使用JavaScript创建表格和合并单元格。实际应用时，你可以参考这些代码，结合你的需求进行修改和扩展，以实现更复杂的表格布局和功能。 ...
function createTable() { var val = document.getElementById("select").options[document.getElementById("select").options.selectedIndex].value; // 得到 select 里面的 value var tab = document....
### JavaScript操作select&&table #### 一、JavaScript操作Select元素 在Web开发中，`<select>`元素用于创建下拉列表。通过JavaScript可以对这些下拉列表进行动态操作，包括添加选项、删除选项、获取选中的值等。...
"Table_Create.zip_Created By_Table"这个文件名暗示了这是一个与创建表格相关的资源，可能是代码示例、教程或者工具，由"Table"创建。标签"created_by table"进一步强调了这是关于通过某种方式或工具生成表格的内容...
sql-create-table-to-json 从SQL CREATE TABLE查询创建JSON对象什么？ data.sql： CREATE TABLE ` dev_access ` ( ` id_profile ` int ( 10 ) unsigned NOT NULL , ` id_tab ` int ( 10 ) unsigned NOT NULL...
function createTable(data) { const table = document.getElementById('csvTable'); const thead = table.createTHead().rows[0]; const tbody = table.createTBody(); // 创建表头 for (const header of ...
function createTable() { var tableNode = document.createElement("table"); tableNode.setAttribute("id", "table"); var row = parseInt(document.getElementsByName("row1")[0].value); var cols = ...
解析 mysql create table 语句，用于通过建表语句生成 model 代码文件。 yarn install yarn dev 或 npm i npm run dev // 构建支持浏览器环境的代码文件，浏览器端直接引用构建出来的 browser/sql-parser.min.js ...
let dragTable = Sortable.create(ele, { animation: 150, // 动画效果 handle: ".move", // 只有点击带有'move'类的按钮时才能触发拖拽 filter: ".disabled", // 不可拖动的行 dragClass: "dragClass", // ...
在json2Html函数的实现中，作者先创建了一个table标签，然后分别创建thead和tbody。对于每一个表头，使用th标签创建，并设置了一些属性如bgcolor。对于表格的数据部分，作者遍历每一行数据，并针对每个单元格使用td...
`tableExport` 是一个非常实用的JavaScript插件，它允许开发者轻松地从HTML表格中导出数据到多种格式，如Excel、PDF和PNG。本文将深入探讨`tableExport`插件的使用方法及其核心功能。 首先，我们需要了解`table...
function createTable(groupedData) { let table = document.createElement('table'); // 创建表头 let thead = document.createElement('thead'); let headerRow = document.createElement('tr'); Object....
在前端开发方面，`pretty_html_table`生成的HTML代码可以直接嵌入到网页中，与JavaScript或jQuery等库配合，实现动态加载、交互式操作等效果。对于那些需要快速生成数据报告或可视化界面的项目，`pretty_html_table`...
Generate a table of contents for an HTML document Display DHTML animations Automate form validation Draw dynamic pie charts Make HTML elements draggable Define keyboard shortcuts for web ...
Create more reliable code with closures and immutable data In Detail JavaScript is a high-level, dynamic, untyped, lightweight, and interpreted programming language and functional programming is a ...
Generate a table of contents for an HTML document Display DHTML animations Automate form validation Draw dynamic pie charts Make HTML elements draggable Define keyboard shortcuts for web ...
tx.executeSql('CREATE TABLE IF NOT EXISTS Users (id unique, name)'); tx.executeSql('INSERT INTO Users VALUES (1, "John")'); }); ``` 上述代码会在`Users`表中创建(id, name)两列，如果表不存在则创建，...