change code generated HTML markup

Question

The following code:

    public virtual string LookupFeatureImages(string ProductID)
    {
        string[] features;
        using (SqlConnection con = new SqlConnection(DB.GetDBConn()))
        {
            con.Open();
            string query = @"SELECT     ExtensionData5
            FROM         Product
            WHERE     (ProductID = @ProductID)";
            using (IDataReader dr = DB.GetRS(query, new SqlParameter[] { new SqlParameter("@ProductID", ProductID) }, con))
            {
                if (dr.Read())
                {
                    if (String.IsNullOrEmpty(dr["ExtensionData5"].ToString()))
                    {
                        return "";
                    }
                    else
                    {
                        features = dr["ExtensionData5"].ToString().Split(',');
                    }
                }
                else
                {
                    return "";
                }
            }
            con.Close();
        }
       string s = "<script type=\"text/javascript\" src=\"skins/Skin_1/jquery.fancybox-1.3.1/fancybox/jquery.mousewheel-3.0.2.pack.js\"></script><script type=\"text/javascript\" src=\"skins/Skin_1/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.js\"></script><link rel=\"stylesheet\" type=\"text/css\" href=\"skins/Skin_1/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.css\" media=\"screen\" />";
       s += "<script type=\"text/javascript\">$(document).ready(function() {    $(\"a.iconClick\").fancybox({'hideOnContentClick': true, 'autoDimensions' : false, 'width' : 400, 'height' : 300 }); });</script>";

        s += "<table><tr>";
        for (int i = 0; i <= features.GetUpperBound(0); i++)
        {
            string name = features[i].Split(':')[0];
            bool isChecked = Boolean.Parse(features[i].Split(':')[2]);

            if (isChecked)
            {
                //s += "<td><img src=\"skins/skin_1/images/" + name + ".gif\" alt=\"" + name + "\" title=\"" + name + "\"></td>";
                s += "<td>";
                s += "<a class=\"iconClick\" rel=\"icons\" href='popup.aspx?title=" + name + "&topic=feature_" + name + "' title='" + name + "'><img src=\"skins/skin_1/images/" + name + ".gif\" alt=\"" + name + "\" title=\"" + name + "\"></a>";
                s += "</td>";

            }
        }
        s += "</tr><tr>";
        for (int i = 0; i <= features.GetUpperBound(0); i++)
        {
            string specification = features[i].Split(':')[1];
            bool isChecked = Boolean.Parse(features[i].Split(':')[2]);

            if (isChecked)
            {
                s += "<td>" + specification + "</td>";
            }
        }
        return s + "</tr></table>";
    }

Outputs HTML like this:

<table id="FeatureBox">
<tbody>
<tr>
<td>
<div id="productInfoGrid">
<p id="ProductIconsTitle">Product Features At-A-Glance (<a href=
"JavaScript:newPopup('t-featureicons.aspx');">key</a>)</p>
<script src=
"skins/Skin_1/jquery.fancybox-1.3.1/fancybox/jquery.mousewheel-3.0.2.pack.js"
type="text/javascript">
</script><script src=
"skins/Skin_1/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.js"
type="text/javascript">
</script><script type="text/javascript">
$(document).ready(function() {       $("a.iconClick").fancybox({'hideOnContentClick': true, 'autoDimensions' : false, 'width' : 400, 'height' : 300 }); });
</script>
<table>
<tbody>
<tr>
<td><a title="classification" href=
"popup.aspx?title=classification&amp;topic=feature_classification"
rel="icons" class="iconClick"><img title="classification" alt=
"classification" src=
"skins/skin_1/images/classification.gif"></a></td>
<td><a title="maxcapacityadults" href=
"popup.aspx?title=maxcapacityadults&amp;topic=feature_maxcapacityadults"
rel="icons" class="iconClick"><img title="maxcapacityadults" alt=
"maxcapacityadults" src=
"skins/skin_1/images/maxcapacityadults.gif"></a></td>
<td><a title="maxcapacitychildren" href=
"popup.aspx?title=maxcapacitychildren&amp;topic=feature_maxcapacitychildren"
rel="icons" class="iconClick"><img title="maxcapacitychildren" alt=
"maxcapacitychildren" src=
"skins/skin_1/images/maxcapacitychildren.gif"></a></td>
<td><a title="maxloadcapacity" href=
"popup.aspx?title=maxloadcapacity&amp;topic=feature_maxloadcapacity"
rel="icons" class="iconClick"><img title="maxloadcapacity" alt=
"maxloadcapacity" src=
"skins/skin_1/images/maxloadcapacity.gif"></a></td>
<td><a title="numberofinflatablechambers" href=
"popup.aspx?title=numberofinflatablechambers&amp;topic=feature_numberofinflatablechambers"
rel="icons" class="iconClick"><img title=
"numberofinflatablechambers" alt="numberofinflatablechambers" src=
"skins/skin_1/images/numberofinflatablechambers.gif"></a></td>
<td><a title="packagingsize" href=
"popup.aspx?title=packagingsize&amp;topic=feature_packagingsize"
rel="icons" class="iconClick"><img title="packagingsize" alt=
"packagingsize" src=
"skins/skin_1/images/packagingsize.gif"></a></td>
<td><a title="sizeinflated" href=
"popup.aspx?title=sizeinflated&amp;topic=feature_sizeinflated" rel=
"icons" class="iconClick"><img title="sizeinflated" alt=
"sizeinflated" src="skins/skin_1/images/sizeinflated.gif"></a></td>
<td><a title="standard" href=
"popup.aspx?title=standard&amp;topic=feature_standard" rel="icons"
class="iconClick"><img title="standard" alt="standard" src=
"skins/skin_1/images/standard.gif"></a></td>
<td><a title="weight" href=
"popup.aspx?title=weight&amp;topic=feature_weight" rel="icons"
class="iconClick"><img title="weight" alt="weight" src=
"skins/skin_1/images/weight.gif"></a></td>
</tr>
<tr class="featureNames">
<td>III,B</td>
<td>1</td>
<td>0</td>
<td>130 kg</td>
<td>3</td>
<td>79 x 28 x 51 cm</td>
<td>305 x 84 cm</td>
<td>ISO 6185-1</td>
<td>10.6 kg</td>
</tr>
</tbody>
</table>
<div class="c1"></div>
</div>
</td>
</tr>
</tbody>
</table>

How can I change the output to DIVs?

Answer 1

Use jQuery change your output. For example, you can get $("#FeatureBox") table(or what ever you need), after that, use css or html methods

Answer 2

I am not too sure as to what you are asking. If you want your code to be displayed in div instead of table, tr and td, that can be easily achieved from within the code. Simply remove the table and tr tags from the output and replace all td tags with div tags. That should effectively remove any table formatting and change everything to div.