2010-07-12 36 views
0

我承认喜欢DIV,但我正在使用嵌套表的项目。我需要移动一些已经存在的字段,并创建新的字段,我将描述为一个网格(在.NET中思考gridview)。如何将列添加到嵌套的HTML表

什么是最无痛的方式添加列到嵌套的HTML表格?或者,我应该调查一下使用无表格设计重新设计整个页面的想法,除了我需要在gridview中使用的字段吗?

的GridView是这样的:

列:数量,金额,说明
行:料,工,杂项

+0

这是可以在客户端完成的事情,还是您计划只在服务器端实现? jQuery帮助客户端的这种事情。 – Tim 2010-07-12 17:05:09

+0

@Tim, 我愿意接受最流畅的解决方案。在使用JQuery方面你有什么建议?谢谢;) – SidC 2010-07-12 17:49:22

+0

如果当前正在查询数据并将其放入服务器端的表中,那么我将不得不建议您保持这种方式。在这之后的Ajax交互是公平的游戏,但我没有看到任何涉及jQuery的优势。 – Fosco 2010-07-13 00:56:54

回答

2

你将不得不>细胞添加< TD到每一行。

既然你说你还需要移动东西,你应该考虑将输出结构重写为DIV格式或重写表结构。我个人更喜欢数据网格的表格结构。

+0

感谢您的建议。我昨天晚上试图添加一个嵌套表格,我必须说结果非常混乱。我将采用您的方法,使用仅用于实际网格本身的表以DIV格式重写。再次感谢您的帮助和指导! – SidC 2010-07-13 16:19:36

0

首先,我不知道是什么的GridView的样子......但 如果我理解正确的问题,你可以尝试添加<td><table>里面,然后使用该表作为列。当你完成列添加</table></td>和事情应该是以前一样。

这种方法可能会变得非常混乱,虽然我不是100%肯定这是你正在努力实现的。

1

jQuery有很多DOM遍历函数可供选择。

让我们说,例如,你开始

<html> 
<body> 
    <table id="aTable"></table> 
</body> 
</html> 

然后,您可以使用jQuery添加到表:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#aTable > tbody").append('<tr id="row1"><td>some data</td></tr>'); 
    }); 
</script> 
</head> 
<body> 
    <table id="aTable"></table> 
</body> 
</html> 

这将单个细胞添加到表。请注意tbody标签,我发现这是需要的,因为tbody是由浏览器呈现的隐式标签。

现在让我们往回走。如果你一开始就在表中已电池,你可以用remove()函数很容易将其删除:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#row1").remove(); 
    }); 
</script> 
</head> 
<body> 
    <table id="aTable"> 
     <tr id="row1"> 
     <td>some data</td> 
     </tr> 
    </table> 
</body> 
</html> 

而且噗,就不见了。这样做的好处是你可以使用事件处理程序和各种各样的很酷的东西以交互的方式完成所有这些事情。我甚至无法抓住jQuery的表面,因为我对它也相当陌生,但文档非常好。 Check it out

编辑:这也假设你知道你会添加什么。如果你需要动态地实现它,一个小AJAX将会有很长的路要走(jQuery将这个抽象出来以使它更好)。

+0

非常感谢!我没有考虑过JQuery作为这个选项。 – SidC 2010-07-12 21:19:32