单击按钮后为我的表选择一个类？ （HTML 表格）
Posted
技术标签:
【中文标题】单击按钮后为我的表选择一个类？ （HTML 表格）【英文标题】：Choose a class for my table after button click? (HTML table) 【发布时间】：2014-04-26 15:38:40 【问题描述】：我在 css 文件 (StyleSheet1.css) 中声明了 2 个类，.Class1 和 .Class2。为我的表格标签单击按钮后，如何在这两个类之间进行选择？
<link href="Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<table class="Class1">
<tr>
<td>Hello World!</td>
</tr>
</table>
CSS 文件：
.Class1
background-color: Blue;
.Class2
background-color: Red;
如果可能的话，我想尽可能地使用 C# 更改类，但如果不是，也许是 javascript？
我对 ASP 和 C# 非常陌生，对 html 有一点经验。
问候
【问题讨论】：
【参考方案1】：您可以使用 Javascript 和 jQuery。请在下面找到代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function ()
$('#btn1').click(function ()
$('#tbl1').toggleClass('Class2');
);
);
</script>
<style>
.Class1
background-color: Blue;
.Class2
background-color: Red;
</style>
</head>
<body>
<table class="Class1" id="tbl1">
<tr>
<td>Hello World!</td>
</tr>
</table>
<button id="btn1">change</button>
</body>
</html>
【讨论】：
对不起，它说“Microsoft JScript 运行时错误：'$' 未定义。”我一定是错过了什么。 这需要用到jQuery库 我明白了。我怎么称呼它？ 这意味着你还没有导入 JQuery 库。在我的代码中，它是从谷歌 CDN 导入的。这是在 行中完成的 我明白了。谢谢你。现在可以了。如果你不介意我问，这是最简单的方法吗？使用 jQuery 更改类？【参考方案2】：如果您使用的是 asp.net webforms（不是 MVC），并且想要在服务器端执行此操作，请通过添加 runat="server" 并为其指定 ID 来使表格成为控件
<table class="Class1" id="myTable" runat="sever">
<tr>
<td>Hello World!</td>
</tr>
</table>
现在您可以在按钮单击事件中（或几乎在页面生命周期的任何阶段使用表服务器端。您可以使用类似以下的内容：
string cssClass = string.Empty;
if(/*What ever to determine to use class 1*/)
cssClass = "Class1";
else
cssClass = "Class2";
myTable.Attributes["class"] = cssClass;
你可以在一行中做到这一点：
myTable.Attributes["class"] = /*Condition to determin class 1*/ ? "Class1" : "Class2";
【讨论】：
感谢您给我这个概念。它也有效，给了我另一个有用的选择和洞察力。以上是关于单击按钮后为我的表选择一个类？ （HTML 表格）的主要内容，如果未能解决你的问题，请参考以下文章
使用 Ctrl+单击和 Shift+单击选择多个 HTML 表格行