Table Headings and Conditional Formatting for HTML Table

This guide addresses three key tasks related to formatting and functionality in HTML tables. It includes.

Disabling Table Icons Based on Status

Demonstrates how to conditionally disable a delete icon in an HTML table row based on a status value using C# in a .NET Core application. The approach uses dynamic HTML generation to apply a disabled class and modify the onclick behavior based on the status.

To conditionally disable the delete icon based on the status in your HTML code using C#, you need to modify the HTML string based on the status value. Here’s how you can achieve this:

C# Code Example

// Assuming 'status' is a variable holding the value of the Status field
string status = "Blocked"; // Replace with your actual status variable

// Initialize StringBuilder to construct the HTML table row
var htmlTable = new StringBuilder();

htmlTable.Append("<td class='text-center'>");
htmlTable.Append("<a id='btnEdit' class='list-icons-item text-primary-600' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#modal_form_horizontal' onclick='BindData(this);'>");
htmlTable.Append("<i class='icon-pencil7 mr-1'></i></a>");

// Check if status is 'Blocked'
if (status == "Blocked")
{
    htmlTable.Append("<a id='btnDel' class='list-icons-item text-danger-600 disabled' data-toggle='modal' data-target='#modal_Delete' onclick='return false;'><i class='icon-bin mr-1'></i></a>");
}
else
{
    htmlTable.Append("<a id='btnDel' class='list-icons-item text-danger-600' data-toggle='modal' data-target='#modal_Delete' onclick='BindData(this);'><i class='icon-bin mr-1'></i></a>");
}

htmlTable.Append("</td>");

Explanation

• StringBuilder: Used to build the HTML string dynamically.
• Conditional Check: If status equals "Blocked," the delete icon <a> tag is given a disabled class and the onclick attribute is set to return false; to prevent any actions.
• Default Case: If the status is not "Blocked," the delete icon behaves normally.

CSS for Disabled State

Ensure you have appropriate CSS to style the disabled state if not already defined.

.disabled {
    pointer-events: none; /* Prevents clicking */
    opacity: 0.5; /* Optional: visually indicates it's disabled */
}

This approach ensures that the delete icon is disabled when the status is "Blocked," and is functional otherwise.

Changing the Button Background Color

This shows how to update the background color of a button to the primary theme using HTML and CSS. The example highlights how to replace classes to achieve the desired color and maintain consistency with the theme.

To change the background color of the button to the primary theme, you can replace the bg-info class with bg-primary. Here’s the updated markup.

<button type="button" class="btn bg-primary btn-sm" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#modal_form_horizontal" onclick="Save();">
    <i class="icon-plus22 mr-1"></i>Add
</button>

Explanation

• bg-primary: This class sets the background color of the button to the primary theme color defined in your CSS framework (e.g., Bootstrap).
• The rest of the button properties remain unchanged.

This will apply the primary theme background color to your button.

Centering Table Headings

Provides a method for aligning table headings to the center using inline CSS and an alternative approach using a CSS class. This ensures that table headers are visually centered and enhances readability in HTML tables.