我想在已经绑定数据的包各种添加一行未绑定的单元格，请问要使用什么方法才能实现？ - ITeye问答

问答首页 → Web前端技术

0 1

我想在已经绑定数据的包各种添加一行未绑定的单元格，请问要使用什么方法才能实现？5

我想在已经绑定数据的包各种添加一行未绑定的单元格，请问要使用什么方法才能实现？

2013年4月23日 16:54

小面加蛋
3
0 0 30

3个答案按时间排序按投票排序

0 0

采纳的答案

当然不是，还可以从设计器里面创建，不过通过代码也不是很复杂啦，使用Spread.Net添加一个未绑定的行：http://www.cnblogs.com/shup/archive/2013/04/23/3038154.html

2013年4月23日 17:09

你值得拥有
0
0 0 13

添加评论

0 0

我去，看标签才知道是什么问题，问题里咋不说明呢，不好意思，闪

2013年4月23日 18:24

yunzhu
426
0 1 27

1条评论

0 0

“包各种”是指“表格中”吗？

通过DOM操作实现。

给你一个完整的例子：

<!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=gb2312" />
<title>用DOM动态控制表格</title>
</head>
<body>
<script language="javascript">
	counter = 1;
	// 插入数据
	function insertData()
	{
		var oStudentsTable = document.getElementById("students");
		var oTrHang = oStudentsTable.insertRow(oStudentsTable.rows.length); //插入一行
		var aText = new Array();
		aText[0] = document.createTextNode("王" + (counter++));
		aText[1] = document.createTextNode("B072");
		aText[2] = document.createTextNode("女");
		aText[3] = document.createTextNode("1025");
		aText[4] = document.createTextNode("13663616963");
		for(var i=0; i<aText.length; i++)
		{
			var oTd = oTrHang.insertCell(i); //插入一个单元格
			oTd.appendChild(aText[i]);
		}
	}
	// 编辑单元格数据
	function editData()
	{
		var oTable = document.getElementById("students");
		oTable.rows[1].cells[0].innerHTML += "Chf";
	}
	//添加删除数据的列
	function insertDeleteCell()
	{
		var oTable = document.getElementById("students");
		var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length);
		oTh.innerHTML = "<font style='font-weight: bold;'>操作</font>";
		for(var i=1; i<oTable.rows.length; i++)
		{
			var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length);
			oTd.innerHTML = "<a href='#' onclick='myDeleteRow(this)'>Delete</a>";
		}
	}
	//添加拥有一个输入框的列
	function insertInputCell() {
		var oTable = document.getElementById("students");
		var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length);
		oTh.innerHTML = "<font style='font-weight: bold;'>输入</font>";
		for(var i=1; i<oTable.rows.length; i++)
		{
			var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length);
			oTd.innerHTML = "<input type=\"text\" style=\"background:#C0F2F3;margin-left:8px;width:10px;height:10px;\" />"
		}
	}
	//删除行
	function myDeleteRow(theDel)
	{
	    theDel.parentNode.parentNode.parentNode.removeChild(theDel.parentNode.parentNode);
	}
	//删除所有行
	function deleteAllRows()
	{
		var studentsTable = document.getElementById("students");
		while(studentsTable.rows.length > 1)
		{
			studentsTable.deleteRow(studentsTable.rows.length - 1);
		}
	}
	//对表格的行进行排序
	function sortByBirthday()
	{
		var studentsTable = document.getElementById("students");
		// 获取所有学生数据行
		/**
		var studentsRowsData = new Array();
		for(var i=1; i<studentsTable.rows.length; i++)
		{
			// 以这种方式获取表格的所有行，但是通过deleteRow方法删除表格的行，会导致获取的行成为空行<tr></tr>
			// studentsRowsData[i-1] = studentsTable.rows[i];
		}
		**/
		var studentsRows = new Array();
		for(var i=1; i<studentsTable.rows.length; i++)
		{
			studentsRows[i-1] = studentsTable.rows[i];
		}
		
		// ---------- 排序 Begin ----------
		for(var i=0; i<studentsRows.length-1; i++)
		{
			for(var j=i+1; j<studentsRows.length; j++)
			{
				var iBirth = Number(studentsRows[i].cells[3].firstChild.nodeValue);
				var jBirth = Number(studentsRows[j].cells[3].firstChild.nodeValue);
				if(iBirth > jBirth)
				{
					var temp = studentsRows[i];
					studentsRows[i] = studentsRows[j];
					studentsRows[j] = temp;
				}
			}
		}
		
		// ---------- 排序 End ----------
		
		/**
		// 删除表格中的所有学生数据行，保留行首
		while(studentsTable.rows.length > 1)
		{
			studentsTable.deleteRow(studentsTable.rows.length - 1);
		}
		**/
		
		var studentsSortedTable = document.getElementById("students_sorted");
		// 先清空存放排序后学生信息的表格
		while(studentsSortedTable.rows.length > 1)
		{
			studentsSortedTable.deleteRow(studentsSortedTable.rows.length - 1);
		}
		for(var i=0; i<studentsRows.length; i++)
		{
			var newRow = studentsSortedTable.insertRow(studentsSortedTable.rows.length);
			var sortedCells = studentsRows[i].cells;
			for(var j=0; j<sortedCells.length; j++)
			{
				var newCell = newRow.insertCell(newRow.cells.length);
				newCell.innerHTML = sortedCells[j].innerHTML;
			}
		}
		studentsSortedTable.style.display = "inline";
	}
</script>
	<h3>用DOM动态控制表格</h3>
	<input type="button" onclick="insertData()" value="插入一行数据" />
	<input type="button" onclick="editData()" value="修改单元格数据" />
	<input type="button" onclick="insertDeleteCell()" value="动态添加删除列" />
	<input type="button" onclick="insertInputCell()" value="动态添加输入框列" />
	<input type="button" onclick="deleteAllRows()" value="删除所有行保留行首" />
	<input type="button" onclick="sortByBirthday()" value="按生日进行排序" />
	<p></p>
	
	<table id="students" border="1">
	  <caption>
		<h3>学生列表</h3>
	  </caption>
	  <tr>
		<th scope="col">姓名</th>
		<th scope="col">学号</th>
		<th scope="col">性别</th>
		<th scope="col">生日</th>
		<th scope="col">联系方式</th>
	  </tr>
	  <tr>
		<td>陈</td>
		<td>B073</td>
		<td>男</td>
		<td>1126</td>
		<td>15915554615</td>
	  </tr>
	  <tr>
		<td>王</td>
		<td>B071</td>
		<td>女</td>
		<td>0304</td>
		<td>13054115694</td>
	  </tr>
	  <tr>
		<td>曹</td>
		<td>B070</td>
		<td>男</td>
		<td>0815</td>
		<td>1381377894</td>
	  </tr>
	  <tr>
		<td>郑</td>
		<td>B078</td>
		<td>男</td>
		<td>1019</td>
		<td>1322377896</td>
	  </tr>
	</table>
	<p></p>
	<table id="students_sorted" border="1" style="display:none">
	  <caption>
		<h3>排序后的学生列表</h3>
	  </caption>
	  <tr>
		<th scope="col">姓名</th>
		<th scope="col">学号</th>
		<th scope="col">性别</th>
		<th scope="col">生日</th>
		<th scope="col">联系方式</th>
	  </tr>
	</table>
</body>
</html>

2013年4月23日 17:08

yunzhu
426
0 1 27

添加评论

相关推荐

报表工具FineReport填报时，如何实现多个单元格绑定一个字段？: 将每一行数据都填入到一张数据表中，本来要想将所有科目都填报入库，则需要添加多个内置SQL，会非常影响填报效率，今天我来告诉大家可以在一个内置SQL中为单个数据表字段绑定多个单元格，即单元格组。

Layui组件Table绑定行点击事件和获取行数据的方法: Layui的Table组件的使用是前端开发中非常基础且重要的技能，接下来详细解析如何在Layui的Table组件中实现行点击事件的绑定以及如何获取对应行的数据。首先，要实现行点击事件的绑定，需要等待Table组件初始化完成...

WPF下DataGrid每行设置不同的ComboBox的数据绑定: 然而，在某些情况下，我们可能需要在DataGrid的每一行中包含一个ComboBox，并且每个ComboBox的数据源都需要独立设置，以满足特定的业务需求。这个任务可以通过灵活的数据绑定和模板来实现。下面我们将详细讲解如何在...

C#实现绑定DataGridView与TextBox之间关联的方法: 同时，选中`DataGridView`的某一行时，`TextBox`会自动显示相应的数据，提供了直观的交互方式。总之，C#实现`DataGridView`与`TextBox`之间的关联，主要依赖于数据绑定机制，通过`DataSet`、`DataTable`和`...

DataGridView手动添加数据(非数据源绑定): 这个控件可以绑定到各种数据源，但也可以手动添加数据，这在不使用数据库或其他数据提供者时非常有用。以下是从给定的代码片段中提取的关于如何在DataGridView中手动添加数据的关键知识点： 1. **创建...

C#实现改变DataGrid某一行和单元格颜色的方法: 在C#中，改变DataGrid的行和单元格颜色通常涉及到对WPF的DataGrid控件的操作，包括数据源的绑定、行和单元格的获取以及样式设置。以下是一个详细的步骤来实现这一功能： 1. **添加DataGrid控件**：在XAML文件中，...

js生成动态表格并为每个单元格添加单击事件的方法: 在提供的代码片段中，使用了`getElementById`方法来获取页面上的表格元素，然后通过`document.createElement`方法来动态创建`<tr>`（表格行）和`<td>`（表格单元格）。通过循环的方式为每一行和每一列创建相应的元素...

gridview 实现一个单元格显示绑定的后台数据里的多个超链接: 使用gridview进行数据绑定后，有时需要实现一个单元格有多个超链接的情况，而且每一行的超链接个数不同内容也不同，且超链接的内容需要根据后台绑定的动态数据确定。本代码中的代码就是为了解决该问题而做的，在Demo...

datagridview绑定datatable数据，添加合计行，后可排序: 本话题主要关注如何将`DataTable`的数据绑定到`DataGridView`，并在此基础上添加合计行，以及实现排序功能。首先，让我们详细解释`DataGridView`和`DataTable`的基本概念。`DataGridView`是Windows Forms中的一种...

如何实现跨单元格的数据统计: 现在，报表的第一列应该已经实现了跨单元格的数据统计，相同名称的数据被汇总在一起，大大简化了数据的呈现和理解。通过以上步骤，我们可以看出 Style Intelligence 和 Style Report 如何通过简单的配置和设置，...

dataGridView动态绑定数据下拉框: 在这个处理程序中，遍历dataGridView的每一行，根据选定的字段和文件数据，执行相应的数据库插入或更新操作。 6. **错误处理和用户体验**：确保有适当的错误处理机制，例如检查文件是否有效，数据库连接是否成功，...

cxGrid单元合并(绑定数据记录): 在IT领域，特别是涉及到用户界面开发时，"cxGrid单元合并(绑定数据记录)"是一个重要的概念，主要应用于创建复杂的表格展示和数据管理。cxGrid是一个流行的Delphi组件库中的控件，它允许开发者构建高度自定义的数据...

C# datagridview 与数据源绑定后对数据的,增加,删除,插入,更新: 在DataGridView中，用户可以直接在最后一行添加新行，完成后按Enter键即可自动增加一行到数据源。如果需要程序控制，可以通过数据源的Add方法添加新的数据： ```csharp DataRow newRow = dataTable.NewRow(); new...

实现datagridview与数据库的绑定并添加comboxcolumn和checkboxcolumn: 在本教程中，我们将探讨如何实现`DataGridView`与数据库的绑定，以及如何在其中添加`ComboBoxColumn`（组合框列）和`CheckBoxColumn`（复选框列），同时涵盖行的复制、删除、上移和下移功能。 1. **与数据库绑定**...

DataGrid简单实现合并单元格: DataGrid由行（Rows）和列（Columns）组成，每一行包含多个单元格（Cells），每个单元格对应一个数据项。默认情况下，每个单元格都占据一整行和一整列的空间。在WPF中，我们可以通过XAML来定义DataGrid的外观和行为...

WPF绑定Datagrid与Textbox等，包括自动通知UI更新显示: 在实现双向数据绑定时，有以下两种常见方法： 1. **XAML中实现绑定单个对象**：在XAML文件中，我们可以直接在控件的属性中指定数据绑定。例如，将一个Textbox的Text属性绑定到数据对象的某个属性，使用"{Binding ...

DevExpress中GridControl的属性设置及动态绑定数据和全选取消全选: 在本文中，我们将深入探讨如何配置GridControl的属性，实现动态数据绑定，以及添加全选和取消全选的功能。首先，让我们了解GridControl的一些核心属性： 1. **ReadOnly**：这个属性决定了GridControl是否允许用户...

WPF DataGrid ComboBox下拉框数据绑定代码实例: 在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中使用DataGrid控件结合ComboBox实现数据绑定。WPF是.NET Framework的一部分，提供了一种强大的UI开发工具，支持丰富的图形效果和数据绑定...

spreadjs_动态添加表头及数据绑定-demo.zip: 标题“spreadjs_动态添加表头及数据绑定-demo.zip”所指的，是使用SpreadJS库创建的一个示例，该示例演示了如何在JavaScript环境中动态地添加表格表头并实现数据绑定。SpreadJS是一款强大的JavaScript电子表格组件，...

DevExpress简单的数据绑定: 在DevExpress GridControl中，数据绑定使你可以将数据集、实体框架模型或其他数据结构映射到控件的行和列，实现数据的实时更新。 2. **数据源选择** GridControl支持多种数据源，如DataTable、List、Entity ...

Ask-but

我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

查看全部排名>>

Global site tag (gtag.js) - Google Analytics