Question

我有一个函数将数据表转换为vb.net中的html表，但我想在每一行中添加备用行颜色。我在代码上添加了一个css，但它没有用。我将如何实现这一目标？

以下是我的代码：

 Public Function ConvertToHtml(ByVal targetTable As DataTable) As String

 Dim myHtmlFile As String = ""

    'Get a worker object.
    Dim strBuilder As New StringBuilder()

    'Open tags and write the top portion.
    strBuilder.Append("<html xmlns='http://www.w3.org/1999/xhtml'>")
    strBuilder.Append("<head>")
    strBuilder.Append("<title>")
    strBuilder.Append("Page-")
    strBuilder.Append(Guid.NewGuid().ToString())
    strBuilder.Append("</title>")

    strBuilder.Append("<style type='text/css'>")
    strBuilder.Append(".tr:nth-child(even){")
    strBuilder.Append("background-color: #dae5f4}")
    strBuilder.Append("</style>")

    strBuilder.Append("</head>")
    strBuilder.Append("<body>")
    strBuilder.Append("<table border='1px' cellpadding='5' cellspacing='0' ")
    strBuilder.Append("style='border: solid 1px Silver; font-family:Franklin Gothic Book; font-size: 14px;'>") 'font-size: x-small

    'Add the headings row.

    strBuilder.Append("<tr align='left' valign='top' bgcolor='#006699'>") '("<tr align='left' valign='top'>")

    For Each myColumn As DataColumn In targetTable.Columns
        strBuilder.Append("<td align='center' valign='top' style='color:#ffffff'>")
        strBuilder.Append(myColumn.ColumnName)
        strBuilder.Append("</td>")
    Next

    strBuilder.Append("</tr>")

    'Add the data rows.
    For Each myRow As DataRow In targetTable.Rows
        strBuilder.Append("<tr align='left' valign='top'>")

        For Each myColumn As DataColumn In targetTable.Columns
            strBuilder.Append("<td align='left' valign='top' style='font-size:12px'>")
            strBuilder.Append(myRow(myColumn.ColumnName).ToString())
            strBuilder.Append("</td>")
        Next

        strBuilder.Append("</tr>")
    Next

    'Close tags.
    strBuilder.Append("</table>")
    strBuilder.Append("</body>")
    strBuilder.Append("</html>")

    'Get the string for return.
    myHtmlFile = strBuilder.ToString()
    Return myHtmlFile
End Function

********* UPDATE ******

这是程序的输出

enter image description here

Answer 1

您的CSS有一个小的语法错误导致您的问题。你真的想拥有：

strBuilder.Append("<style type='text/css'>")
strBuilder.Append("tr:nth-child(even){background-color: #dae5f4}")
strBuilder.Append("</style>")

注意我删除了“。”从tr前面 - 这使得元素“tr”而不是项目具有CSS类“tr”。

我还会删除tr中的内嵌背景 - 将其更改为：

strBuilder.Append("<tr align='left' valign='top'>")

将bgcolor移动到CSS中，最后留下：

strBuilder.Append("<style type='text/css'>")
strBuilder.Append("tr{background-color: #006699;}")
strBuilder.Append("tr:nth-child(even){background-color: #dae5f4}")
strBuilder.Append("</style>")

我已经包含了一个示例HTML输出，显示了功能性CSS。

<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
    <title>
    Page-
    strBuilder.Append(Guid.NewGuid().ToString())
    </title>

    <style type='text/css'>
    tr{background-color: #006699}
    tr:nth-child(even){background-color: #dae5f4}
    </style>

    </head>
    <body>
    <table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver; font-family:Franklin Gothic Book; font-size: 14px;'>
    <tr align='left' valign='top' style='background-color:black'>
        <td align='center' valign='top' style='color:#ffffff'>
            Sample
        </td>
        <td align='center' valign='top' style='color:#ffffff'>
            Sample
        </td>
    </tr>
        <tr align='left' valign='top'>
            <td align='left' valign='top' style='font-size:12px'>
                Sample
            </td>
            <td align='left' valign='top' style='font-size:12px'>
                Sample
            </td>
        </tr>
        <tr align='left' valign='top'>
            <td align='left' valign='top' style='font-size:12px'>
                Sample
            </td>
            <td align='left' valign='top' style='font-size:12px'>
                Sample
            </td>
        </tr>
        <tr align='left' valign='top'>
            <td align='left' valign='top' style='font-size:12px'>
                Sample
            </td>
            <td align='left' valign='top' style='font-size:12px'>
                Sample
            </td>
        </tr>
    </table>
    </body>
    </html>

如何在html表中添加备用行颜色？

1 个答案: