Adding a CSS class dynamically to a table cell in the backend using Vb.net

Currently, the layout of my table looks like this:

<tr>
   <td> Field1 </td>
   <td> Field2 </td>
   <td> Field3 </td>
   <td> Field4 </td>
   <td> Field5 </td>
</tr>

<tr>
   <td> anothefield1 </td>
   <td> anothefield2 </td>
   <td> anothefield3 </td>
   <td> anothefield1 </td>
   <td> anothefield1 </td>
</tr>

I want to dynamically add a CSS class in every td per column. It should look like this:

<tr>
   <td class = '1'> Field1 </td>
   <td class = '2'> Field2 </td>
   <td class = '3'> Field3 </td>
   <td class = '4'> Field4 </td>
   <td class = '5'> Field5 </td>
</tr>

<tr>
   <td class = '1'> anothefield1 </td>
   <td class = '2'> anothefield2 </td>
   <td class = '3'> anothefield3 </td>
   <td class = '4'> anothefield4 </td>
   <td class = '5'> anothefield5 </td>
</tr>

This pattern should continue for each row.

To achieve this layout, I have written some code so far:

Dim dv As New DataView(ds.Tables(0))
Dim dvfilter As DataTable = dv.ToTable(True, {"date"})
Dim dt2 As New DataTable
For Each dtrow As DataRow In dvfilter.Rows

dv.RowFilter = "Total_Load < Potential_Load"
dt2 = dv.ToTable(False, "Field1", "Field2", "Field3", "Field4", "Field5"})
Next

Dim builder As New StringBuilder
    builder.Append("<!DOCTYPE html><html>")
    builder.Append("<head>")
    builder.Append("</head>")
    builder.Append("<body>")
    builder.Append("<div class = 'email-section'>") 
    builder.Append("<table id = 'email' class='emai_table'>")
    builder.Append("<thead>")
    builder.Append("<tr>")
    builder.Append("<th>Field1</th>")
    builder.Append("<th>Field2</th>")
    builder.Append("<th>Field3</th>")
    builder.Append("<th>Field4</th>")
    builder.Append("<th>Field5</th>")
 For Each row As DataRow In dt2.Rows
    builder.Append("<tr>")
    For Each col As DataColumn In dt2.Columns
         builder.Append("<td>" & row(col).ToString + " " & "</td>")
    Next
         builder.Append("</tr>")
         builder.AppendLine()
Next
    builder.Append("</tbody>")
    builder.Append("</table>")
    builder.Append("</div>")
    builder.Append("</body>")
    builder.Append("</html>")

Your assistance on how to implement this would be greatly appreciated. Thank you!

Answer №1

To enhance the functionality of your code, consider introducing a new counter within the primary For loop and manipulate its value accordingly inside the nested For loop.

For Each row As DataRow In dt2.Rows
    builder.Append("<tr>")
    Dim i as Integer
    i = 1
    For Each col As DataColumn In dt2.Columns
         builder.Append("<td class=""" & i & """>" & row(col).ToString + " " & "</td>")
         i = i + 1
    Next
         builder.Append("</tr>")
         builder.AppendLine()
Next

Although my VB skills are a bit rusty, this should give you an idea of how to approach it in your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Locate Checkbox by its Attribute Name and Value

On my webpage, there are multiple groups of checkboxes. In one particular group, I have added a custom "documentcategory" attribute to each checkbox. My goal is to identify all the checkboxes on the page that have the "documentcategory" attribute with a va ...

Adjust the dimensions of the MaterialUI Switch component manually

Struggling to resize a Material-UI Switch as the default size isn't suitable. Managed to increase the size, but now the behavior isn't ideal. It looks fine in its default state: https://i.sstatic.net/qLpDZ.png. However, when changing its sta ...

Utilizing JQuery for handling dynamically created HTML tables

I am encountering an issue with my dynamically generated HTML tables. Each table row contains an Edit button, but the click event only seems to work for buttons in the first table and not for subsequent ones. How can I modify my code to ensure that the cli ...

How can you alter a property within an array of records retrieved from a Mongoose query?

const images = await tbl .find({ creator_id: req.user._id, }) .select({ creator_id: 0, }) .exec() .then((images) => images.forEach((image) => { image.file_name = process.env.IMAGE_ ...

Zebra lines overlooking unseen details

Imagine having a table where rows can be dynamically assigned classes such as .hidden, which hide those rows using CSS. The rows are styled with alternating colors, like this: tr:nth-child(even) { background-color: $light-grey; } But here's the ...

`problem with moment.js incorrectly identifying the day of a given date`

I'm currently working with a field that has the value 03-01-2020, which is in the DD-MM-YYYY date format. However, when I apply the code moment.utc(document.getElementById('date').value, "DD-MM-YYYY HH:mm:ss").toDate(), I noticed that the re ...

What is the best way to implement an Android-style tab bar using Bootstrap for web pages?

Can you provide guidance on using Bootstrap to create an Android tab bar similar to the one seen in the WhatsApp application for web pages? Thank you for your assistance. ...

The mechanics of citing two different stylesheets

Just delving into the world of HTML and I'm attempting to link 2 items with href. Surprisingly, I don't receive an error message, but my style.css file refuses to cooperate. Any suggestions? <link rel="stylesheet" href="https://maxcdn.bootstr ...

Centered Fixed Upward Scrolling Div

Currently facing a challenge with my project involving a chat interface created in Angular. I am struggling with the CSS styling as the chat starts at the top and scrolls downward off-screen as the conversation progresses. Although I can scroll along with ...

"Delve into the art of utilizing negative space between elements with

Looking to implement hover detection between rows in a grid container, rather than on individual items. The number of items in the container and per row may vary. https://i.sstatic.net/yBgKI.png It's important to note that the item count in the cont ...

Error Encountered: Element Type Mismatch in Root Div

In my quest to locate the root div element, I have implemented the following method: var parentDoc = window; while (parentDoc !== parentDoc.parent) { parentDoc = parentDoc.parent; } parentDoc = parentDoc.document; var divContent = parentDoc.getElement ...

Issue with Google Maps Angular directive failing to function correctly

Trying to implement the Google Maps for AngularJS directive within a function has been a challenge. I've managed to make it work by moving $scope.map outside the function call and setting the lat/lon statically. However, my goal is to dynamically set ...

A step-by-step guide to creating a CSS menu using pure HTML markup

I have been working on the CSS for a menu using some HTML code, but I am stuck and uncertain about my next steps. Here is the CSS I have added so far: #menu-my-integra, ul.sub-menu { list-style: none; padding: 0; margin: 0; } #menu-my-integra li ...

Adjust picture dimensions when the window changes (using jQuery)

Hey there, I'm in need of some help resizing images on my webpage. I want the images to adjust their size when the page loads or when the browser is resized. The images can be either portrait or landscape, and they will be contained within a div that ...

The Order of Importance Using a Dropdown List in C#

I have come up with an innovative idea to create a Ranking Priority system using a DropDownList ASP server control. My approach involves having 3 DropDownList controls, each containing 3 items ("First", "Second", "Third"). When I select an item in the 1st ...

The script file (.js) isn't showing up on the PHP or HTML webpage

Experiencing a peculiar issue and seeking advice on alternative solutions due to my limited experience in this matter. The Issue: I currently have the following script running smoothly: <script type="text/javascript" id="myscript" src="http://piclau ...

Executing JSON.parse with embedded functions

There is a string that functions correctly when converted to an OBJ. var obj = JSON.parse('{ "placeholder": "Hello...."} '); This object is then used in the tagEditor plugin like so: $('textarea').tagEditor(obj); However, the require ...

Saving, displaying, and removing a JSON document

As someone new to the world of JavaScript, I am encountering an issue with JavaScript and AJAX. I am aiming to create a function that allows me to add new elements with unique indexes. After saving this information to a JSON file, I want to display it on a ...

Creating a custom URL for an ASP.NET MVC action with the necessary hostname and port specifications

Here is the information for my current request: In the asp.net view layer, I am looking to display an action URL in the following format (full URL with http://protocol + hostname + port + controllerName + actionName): ...

Using a loop to iterate through a multidimensional array in Node.js or JavaScript, creating additional data and adding new key-value pairs

Here is an array of objects showcasing different intents and results : var finalresult = [{ "Date": "Wed Jan 15 2020 00:00:00 GMT+0530 (India Standard Time)", "data": [{ "intent": "delivery", "result": [{ "h ...