`
哈达f
  • 浏览: 120313 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

动态创建表格，删除行列

 
阅读更多 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="../Day26/doctool.js"></script>
<script type="text/javascript">
function createTab1()
{
	var tabNode = doc.createElement("table");
	
	var tbdNode = doc.createElement("tbody");
	
	var trNode = doc.createElement("tr");
	
	var tdNode = doc.createElement("td");
	
	var textNode = doc.createTextNode("单元格一");
	
	tdNode.appendChild(textNode);
	trNode.appendChild(tdNode);
	tbdNode.appendChild(trNode);
	tabNode.appendChild(tbdNode);
	
	byTag("div")[0].appendChild(tabNode);
}

function createTab()
{
	var tabNode = doc.createElement("table");
	//tabNode.id = "tabid";
	tabNode.setAttribute("id","tabid");
	
	var row = byName("rownum")[0].value;
	var col = byName("colnum")[0].value;
	
	
	for(var x=1; x<=row; x++)
	{
		var trNode = tabNode.insertRow();
		for(var y=1; y<=col; y++)
		{
			var tdNode = trNode.insertCell();
			tdNode.innerHTML = x+"...."+y;
		}
	}
	
	byTag("div")[0].appendChild(tabNode);
	event.srcElement.disabled = true;
}

function delRow()
{
	var tabNode = byId("tabid");
	if(tabNode==null)
	{
		alert("表格不存在 ");
		return;
	}
	
	var rownum = byName("delrow")[0].value;
	if(rownum>0 && rownum<=tabNode.rows.length)
		tabNode.deleteRow(rownum-1);
	else
	{
		alert("删除的行不存在，学习数数很重要");
		
	}
}

function delCol()
{
	var tabNode = byId("tabid");
	if(tabNode==null)
	{
		alert("表格不存在 ");
		return;
	}
	
	var colnum = byName("delcol")[0].value;
	
	if(colnum>0 && colnum<=tabNode.rows[0].cells.length)
	{
		for(var x=0;x<tabNode.rows.length; x++)
		{
			tabNode.rows[x].deleteCell(colnum-1);
		}
	}
	else
	{
		alert("删除的列不存在");
	}
}

</script>

</head>


<body>
<!--
通过页面的按钮可以动态的创建一个表格。
-->
行：<input type="text" name="rownum" /><br />
列：<input type="text" name="colnum" /><br />

<input type="button" value="创建表格" onclick="createTab()" /><br />

<input type="text" name="delrow" />
<input type="button" value="删除行" onclick="delRow()" />
<br />
<input type="text" name="delcol" />
<input type="button" value="删除列" onclick="delCol()" />
<br />
<br />

<div>
</div>
</body>
</html>
 
分享到：
| DOM简介
评论
发表评论

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

相关推荐

    Javascript动态创建表格及删除行列的方法

    在JavaScript中，动态创建表格和删除行列是常见的需求，尤其在网页交互和数据展示中。以下将详细讲解如何实现这些功能。 首先，我们来看如何动态创建表格。在HTML中，表格由`&lt;table&gt;`元素定义，包含`&lt;tr&gt;`（行）和`...

    js动态创建表格,删除行列的小例子

    以上就是通过JavaScript动态创建表格，以及删除表格中行列的基本过程和代码实现。掌握这些技能，能够极大地增强Web应用的交互性和用户体验。对于有志于学习前端开发的朋友来说，这些操作是必须熟练掌握的基础知识点...

    js动态操作表格

    这个主题主要涵盖如何使用JavaScript来创建、修改以及删除HTML表格（`&lt;table&gt;`元素）中的行（`&lt;tr&gt;`）、列（`&lt;td&gt;`或`&lt;th&gt;`）和单元格。下面我们将深入探讨这一话题。 首先，我们需要了解HTML表格的基本结构。一个...

    winfrom 动态显示表格

    动态显示表格是指在程序运行过程中，根据需要自动创建和销毁表格的行和列。这种方式使得开发者能够灵活地处理不同数量和类型的数据，而无需在设计时就固定表格结构。 在WinForms中，我们通常使用两种主要的控件来...

    js操作table元素,表格的行列新增、删除汇集.txt

    综上所述，这些JS函数提供了强大的工具集，可用于动态管理和操作HTML表格，包括行和列的增删、单元格的合并与移动、样式的一致性保持，以及表格布局的智能调整。通过合理运用这些功能，开发者能够创建高度灵活和响应...

    可写的动态表格

    这可能包括创建表格、绑定数据、监听事件、实现编辑功能以及样式美化等内容。 总的来说，动态表格是现代Web应用中不可或缺的一部分，通过JavaScript和相关库，开发者可以构建出功能强大且用户友好的数据管理界面。...

    WPF动态添加行列DATAGRID

    在某些场景下，我们可能需要根据程序运行时的条件或用户交互来动态地添加行列。本文将深入探讨如何在WPF中实现DataGrid的动态添加行列功能。 首先，我们需要理解DataGrid的基本用法。DataGrid可以通过绑定到一个...

    JavaScript动态操作表格，添加，删除行、列及单元格

    1. **创建表格** 在HTML中，我们可以使用`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等标签创建一个基本的表格。然后通过JavaScript获取表格元素，例如使用`document.getElementById()`或`document.querySelector()`方法。 2. **...

    js操作table元素实现表格行列新增、删除技巧总结

    总结起来，这些JavaScript方法提供了一套完整的工具集，用于动态地管理HTML表格的行列，包括新增、删除、合并、移动、赋值样式以及进行必要的验证和参数获取。这在网页开发中是一个强大的功能集合，尤其适用于创建...

    c# tablelayoutpanel 动态增加和删除列 已测试通过 动态合并单元格 动态添加控件

    总之，`TableLayoutPanel`的动态管理能力使得开发者能够构建更灵活的用户界面，通过增加和删除列适应不同场景，通过合并单元格实现复杂布局，而动态添加控件则有助于根据程序运行时的需求创建或更新UI。这些都是C# ...

    PHP,HTML,ASP,JSP制作动态表格必备小技巧

    在 Web 开发中，动态生成 HTML 表格是一项常见需求，尤其是在需要用户实时添加或删除表格行的情况下。这里提供了一个示例，演示如何使用 JavaScript 来实现这一功能： ```javascript function addRow() { var ...

    table表单增删行列例子

    在HTML中，`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`表示表格行，`&lt;td&gt;`代表单元格，`&lt;th&gt;`则用于定义表头单元格。一个简单的表格结构可能如下： ```html 列1 列2 数据1 数据2 ``` 二、JavaScript操作 1. ...

    动态改变表格的行和列

    5. **动态交互：** 为了实现用户交互，如点击按钮增加或删除行列，可以监听按钮的`click`事件，并在回调函数中执行上述操作。确保为操作添加适当的验证和错误处理，以防止非法索引导致的问题。 ```javascript ...

    怎么在word2021中表格里增加插入行列.docx

    在Word 2021中，用户不仅可以轻松创建表格，还可以对已有的表格进行编辑和调整，包括添加新的行列。这种功能对于需要动态更新表格内容的情况非常有用。本文将详细介绍如何在Word 2021中向表格中插入新的行列。 ####...

    js动态创建、删除表格示例代码

    生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号 方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。 方法二：使用createElement生成...

    jquery数据统计饼图+表格动态效果现实

    其次，使用jQuery操作DOM创建表格和饼图的初始结构；然后，利用相应的插件或自定义函数生成图表和表格；最后，添加事件监听器以响应用户的交互，并更新图表和表格以反映数据变化。 7. **应用场景**: 这样的技术可以...

    js动态生成行列，并能够动态改变只读属性

    JavaScript可以用于动态创建和插入`&lt;tr&gt;`（行）和`&lt;td&gt;`（单元格）元素。例如，你可以创建一个函数，接受行数和列数作为参数，然后使用`document.createElement()`创建新元素，并使用`appendChild()`将它们添加到...

    MFC实现EXCEL表格

    在MFC中，我们可以利用CListCtrl或CGridCtrl类来创建表格视图。CListCtrl常用于简单的列表显示，而CGridCtrl更适合创建具有行和列结构的表格。在这个项目中，描述提到使用了CList来完成表格的实现，这可能意味着...

    webwork 中table动态增加行列

    在"webwork 中table动态增加行列"这个场景下，我们通常会创建一个名为`JzqdAction.java`的Action类，它将承载表格操作的逻辑。这个类可能包含以下几个关键方法： 1. `addRow()`: 这个方法会在表格中添加新的行。它...

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