How can I select a class for my HTML table once the button is clicked?

Question

How can I select a class for my HTML table once the button is clicked?

After clicking a button, I need to select between two classes (.Class1 and .Class2) declared in the css file StyleSheet1.css for my table tag. How can I achieve this?

<link href="Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<table class="Class1">
    <tr>
        <td>Hello World!</td>
    </tr>
</table>

CSS File:

.Class1
{   
    background-color: Blue;
}
.Class2
{
    background-color: Red;
}

If possible, I would like to use C# to change classes dynamically, but if not, maybe JavaScript could work?

I'm fairly new to ASP and C#, with some experience in HTML.

Best Regards

c#javascript html asp.net css

Answer 1

Answer №1

If you're looking to add interactivity to your webpage, consider using a combination of Javascript and jQuery. Here is an example code snippet:

<!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>

Answer 2

If you're looking to add interactivity to your webpage, consider using a combination of Javascript and jQuery. Here is an example code snippet:

<!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>

Answer 3

Answer №2

For those utilizing asp.net webforms (not MVC) and looking to handle this task on the server side, you can convert the table into a control by including runat="server" and assigning an ID to it

<table class="Class1" id="myTable" runat="sever">
    <tr>
        <td>Hello World!</td>
    </tr>
</table>

After doing so, you will be able to manipulate the table server-side within the button click event or at any point in the page life cycle. Here is an example of how you could achieve this:

string cssClass = string.Empty;

if(/*Condition to determine if Class1 should be used*/)
{
     cssClass = "Class1";
}
else
{
     cssClass = "Class2";
}

myTable.Attributes["class"] = cssClass;

If you prefer a more concise approach, you could condense the code into one line like this:

myTable.Attributes["class"] = /*Condition to determin class 1*/ ? "Class1" : "Class2";

Answer 4

For those utilizing asp.net webforms (not MVC) and looking to handle this task on the server side, you can convert the table into a control by including runat="server" and assigning an ID to it

<table class="Class1" id="myTable" runat="sever">
    <tr>
        <td>Hello World!</td>
    </tr>
</table>

After doing so, you will be able to manipulate the table server-side within the button click event or at any point in the page life cycle. Here is an example of how you could achieve this:

string cssClass = string.Empty;

if(/*Condition to determine if Class1 should be used*/)
{
     cssClass = "Class1";
}
else
{
     cssClass = "Class2";
}

myTable.Attributes["class"] = cssClass;

If you prefer a more concise approach, you could condense the code into one line like this:

myTable.Attributes["class"] = /*Condition to determin class 1*/ ? "Class1" : "Class2";

How can I select a class for my HTML table once the button is clicked?

Answer №1

Answer №2

Similar questions

Optimizing Bootstrap 4 Flex-Row Dimensions

The scaling of the slick carousel image is not working as expected

Overlap of columns within a nested flexbox arrangement

Achieving Vertical Alignment of Text and Icon in the Same Line Using HTML and CSS

I'm perplexed by the inner workings of infinite ajax scroll in fetching additional posts

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Refreshing the electron renderer process is accomplished by executing an update query in sqlite3

A step-by-step guide on crafting a triangular-shaped div connected to another div

Layered Architecture for ASP.NET/c# Website: A Structured Design Approach

Creating a variable before defining a function

Steps to extract key and value from a collection in Firebase database

divs adjust their size based on how many are placed in a single row

Issue with Chrome (2) preventing HTML5 video from loading using video.js

Eliminate unnecessary spaces in the input field located below the provided text

Aggregate array based on specified criteria in ReactJS

Developing and modifying CSS within Flex3 Air

Bootstrap 4 Alpha Grid does not support aligning two tables side by side

What is the syntax for creating a zip function in TypeScript?

What is the process for assigning a class to every button on a webpage?

Exploring the Power of Title and the Wildcard Universal Selector in JavaScript CSS/HTML5