<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#testDiv{
border:2px solid #000000;
width:500px;
height:95px;
overflow-x:hidden;
overflow-y:scroll;
}
input{
width:50px;
}
#testTable {
width:96.6%;
border-collapse: collapse;
border-right: 2px solid #000000;
table-layout: fixed;
empty-cells:show;
}
#testTable td{
border-style:dotted;
border-width:0 0 1px 0;
border-color:#000000;
height:25px;
padding:0;
}
</style>
<script type="text/javascript">
// window onload
window.onload=function(){
var testTable= document.getElementById("testTable")
changeTableWidth(testTable);
addBorderCss(testTable);
addEvent(testTable);
}
// add mouseover mouseout click event
var selected_index=-1;
function addEvent(table){
for(var i=0;i<table.rows.length;i++){
table.rows[i].onmouseover=function(){
this.style.backgroundColor="#E8F2FE";
if(selected_index!=-1){
table.rows[selected_index].style.backgroundColor="#C6D6FD";
}
};
table.rows[i].onmouseout=function(){
this.style.backgroundColor="";
if(selected_index!=-1){
table.rows[selected_index].style.backgroundColor="#C6D6FD";
}
};
table.rows[i].onclick=function(){
if(selected_index!=-1){
table.rows[selected_index].style.backgroundColor="";
}
this.style.backgroundColor="#C6D6FD";
selected_index=this.rowIndex;
}
}
}
//add tr
function addTrTd(table) {
table.insertRow(-1);
var rows = table.rows.length;
var cols = table.rows[0].cells.length;
for ( var i = 0; i < cols; i++) {
table.rows[rows - 1].insertCell(-1);
table.rows[rows - 1].cells[i].innerHTML=" ";
}
addBorderCss(table);
addEvent(table);
}
// add tr to table
function addTable(table){
var rows=table.rows.length;
var cols=table.rows[0].cells.length;
table.insertRow(-1);
for(var i=0;i<cols;i++){
table.rows[rows].insertCell(-1);
table.rows[rows].cells[i].innerHTML="test";
table.rows[rows-1].cells[i].style.borderBottom="1px dotted #000000";
}
addBorderCss(table);
addEvent(table);
}
// delete last tr of table
function deleteTable(table){
if(table.scrollHeight<115){
return;
}
table.deleteRow(table.rows.length-1);
addBorderCss(table);
addEvent(table);
}
// reset table
function resetTable(table){
var length=table.rows.length;
for(var i=0;i<length;i++){
for(var j=0;j<table.rows[i].cells.length;j++){
table.rows[i].cells[j].innerHTML=" ";
}
}
}
// change table width for different browser
function changeTableWidth(table){
if(navigator.userAgent.indexOf("Firefox")!=-1){
table.style.width="99.8%";
}else{
table.style.width="96.6%";
}
}
// change border css
function addBorderCss(table){
var rows=table.rows.length;
var cols=table.rows[0].cells.length;
for(var i=0;i<rows;i++){
for(var j=0;j<cols;j++){
table.rows[i].cells[j].style.borderStyle="dotted";
table.rows[i].cells[j].style.borderColor="#000000";
table.rows[i].cells[j].style.borderWidth="0 0 1px 0";
table.rows[0].cells[j].style.borderTop="none";
table.rows[rows-1].cells[j].style.borderBottom="none";
}
table.rows[i].cells[0].style.borderLeft="none";
}
}
// add table
function addt(){
addTrTd(document.getElementById("testTable"));
// addTable(document.getElementById("testTable"));
}
// delete table
function deletet(){
deleteTable(document.getElementById("testTable"));
}
// reset table
function resett(){
resetTable(document.getElementById("testTable"));
}
</script>
<title>JavaScript对表格进行添加删除修改</title>
</head>
<body>
<input type="button" value="add" onclick="addt()">
<input type="button" value="delete" onclick="deletet()">
<input type="button" value="reset" onclick="resett()">
<div id="testDiv">
<table id="testTable">
<tbody>
<tr>
<td>test</td><td>test</td><td>test</td>
<td>test</td><td>test</td><td>test</td>
</tr>
<tr>
<td>test</td><td>test</td><td>test</td>
<td>test</td><td>test</td><td>test</td>
</tr>
<tr>
<td>test</td><td>test</td><td>test</td>
<td>test</td><td>test</td><td>test</td>
</tr>
<tr>
<td>test</td><td>test</td><td>test</td>
<td>test</td><td>test</td><td>test</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
分享到：
相关推荐
- **创建新行**：要向表格添加行，首先需要创建一个新的`<tr>`元素，然后创建`<td>`元素并设置其内容。最后，将这些元素添加到表格的`<tbody>`标签内。 - **删除行**：通过获取行的引用（例如，通过点击事件的`...
这个"表格数据添加删除修改代码.rar"资源提供了一种基于jQuery的JavaScript解决方案，适用于那些希望在网页上实现动态交互表格功能的开发者。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互...
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
"jQuery表格编辑添加删除行代码"就是针对这一需求提供的一种解决方案，它利用JavaScript库jQuery的强大功能，实现了在表格中对数据进行编辑、添加和删除等操作。本文将详细解析这一代码实现的原理和应用。 首先，...
在这款插件中，我们可以通过调用特定的jQuery方法，轻松地对表格进行动态操作。例如，可以使用`.append()`来添加新的行，`.remove()`来删除选中的行，以及`.html()`或`.text()`来修改单元格的内容。 在描述中提到，...
在这个例子中，我们将探讨如何利用JavaScript在HTML表格中实现动态添加行，并将数据提交到服务器进行存储。 首先，我们需要创建一个基本的HTML结构，包括一个表单和一个表格。表格中包含预定义的列，如项目名称、...
总的来说，这个压缩包提供了一个实用的示例，帮助开发者了解如何在Vue.js中实现动态表格，并添加删除修改功能。这不仅适用于学习Vue.js基础，还对提升实际项目开发能力有所帮助。通过研究这个代码，你可以深入理解...
在这个例子中，`addRow`函数通过`insertRow`方法向表格添加新行，并使用`insertCell`添加新单元格，然后设置单元格的内容。 删除操作同样简单，只需要获取到要删除的行并调用`remove`方法： ```html ()">删除行 ...
在JavaScript（JS）中添加和删除表格是网页动态交互中常见...综上所述，JavaScript添加删除表格涉及的核心概念包括DOM操作、事件处理和动态页面更新。通过理解和实践这些，开发者可以创建出具有高度交互性的网页表格。
JavaScript是一种在浏览器环境中运行的脚本语言，它允许我们与用户进行交互并修改页面内容。在动态添加表格行的场景中，JavaScript可以监听用户的操作，如点击按钮，然后在HTML表格中插入或移除行。以下是一个简单的...
bootstrapTable实现表格内数据的添加、删除、修改、查询
1. **JavaScript动态操作表格**：指利用JavaScript代码对HTML表格进行动态的添加、删除、修改等操作，而不需要刷新页面或重新加载数据。 2. **添加、删除行、列及单元格**：这是动态操作表格的主要功能，可以分别对...
JavaScript可以用于动态生成或修改这些元素，使表格更具动态性。 2. **动态增加行**：在JavaScript中，可以利用`document.createElement()`方法创建新的`<tr>`和`<td>`元素，然后通过`appendChild()`或`...
在处理表格时，有时我们可能需要对某些行或列进行删除，并清晰地表示出这些被删除的部分，以便于审阅或追溯。"表格删除线"就是这样一个功能，它允许用户在表格中添加删除线，以视觉上标识出已被删除但尚未实际移除的...
1. **DOM操作**：在JavaScript中，Document Object Model（DOM）是网页内容的结构化表示，通过DOM我们可以对表格进行添加、删除、修改单元格或行等操作。例如，`document.getElementById()`、`document....
《jQuery表格内容修改删除代码详解》 在网页开发中，数据展示往往需要用到表格，而能够交互式的表格，如允许用户直接在表格内修改和删除数据，无疑会提升用户体验。本篇将详细介绍基于jQuery和Bootstrap构建的可...
在JavaScript编程中，实现添加和删除表格操作是常见的任务，特别是在动态交互的网页应用中。以下将详细解析如何使用JavaScript来实现这个功能。 首先，HTML结构是基础，它定义了表格的基本布局。在这个例子中，我们...
本教程将深入讲解如何在HTML表格中实现内容的添加和删除功能，这对于掌握DOM操作和理解JavaScript、CSS及HTML的基础应用至关重要。 首先，我们需要创建一个基本的HTML表格结构。HTML的`<table>`元素是表格的核心，...
在探讨“javascript表格操作”这一主题时，我们深入解析如何使用JavaScript来动态地创建、修改和操作HTML表格。以下是从给定的代码片段中提取的关键知识点： ### 动态插入行与删除行 #### 插入行：`insertRow()` -...
本教程将深入探讨如何使用jQuery实现表格的增加、修改、删除和保存功能，这些功能是许多Web应用程序的核心部分，特别是在数据管理界面中。 ### 增加 在jQuery中，增加表格行通常是通过动态创建`<tr>`元素并将其...