Question

我尝试在一个单元格中创建一个带有ImageButton的表。

我的表格实现如下：

<table class="features-table">
                <thead>
                           <tr>
                               <td></td>
                               <td>1</td>
                               <td>2</td>
                               <td>3</td>
                               <td>4</td>
                               <td>5</td>
                               <td>6</td>
                               <td>7</td>
                               <td>8</td>
                               <td>9</td>
                               <td>10</td>
                               <td>1</td>
                           </tr>
                </thead>
                        <tfoot>
                        </tfoot>
                <tbody>
            <div id="IDDIV" runat="server"></div>
                </tbody></table>

我通过在div中添加一个html-string来填充我的表。使用如下方法生成此字符串：

    private string buildHtmlTableString(List<Week> w)
    {
        string result = "";
        foreach (Week element in w)
        {
            string s = "<tr>" +
                        "<td> Week " + element.weekNumber + 
                        "</td>" +
                        "<td>" + element.1 + " €</td>" +
                        "<td>" + element.2 + " €</td>" +
                        "<td>" + element.3 + " €</td>" +
                        "<td>" + element.4 + "</td>" +
                        "<td>" + element.5 + " €</td>" +
                        "<td>" + element.6+ "</td>" +
                        "<td>" + element.7 +" €</td>" +
                        "<td>" + element.8 + "</td>" +
                        "<td>" + element.9 + " €</td>" +
                        "<td>" + element.10 + " €</td>" +
                        "<td>" + "<asp:ImageButton runat=\"server\" ID=\"" + element.1 + "\" Height=\"20px\" Width=\"20px\" OnClick=\"test_Click\" ImageUrl=\"~/detail.ico.ico\"></asp:ImageButton></td>" +
                        "</tr>";
            result = result + s;
        }
        return result;
    }

桌子的风格：

#main
{
    width: 960px;
    margin: 160px auto 0 auto;
    background: white;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 30px;
    border: 1px solid #adaa9f;
    -moz-box-shadow: 0 2px 2px #9c9c9c;
    -webkit-box-shadow: 0 2px 2px #9c9c9c;
}

/*Features table------------------------------------------------------------*/
.features-table
{
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;  
  background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
  background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff)); 
}

.features-table td
{
  border-right: 1px solid #cdcdcd;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  white-space: nowrap;
  text-align: center;
}

/*Body*/
.features-table tbody td
{
  text-align: center;
  font: normal 12px Verdana, Arial, Helvetica;
  width: 150px;
}

.features-table tbody td:first-child
{
  width: auto;
  text-align: left;
}


.features-table td:nth-child(1)
{
  background: #e7f3d4;  
  background: rgba(179,0,0,0.3);
}

/*Header*/
.features-table thead td
{
  background: rgba(144,144,144,0.15);
  font: bold 12px 'trebuchet MS', 'Lucida Sans', Arial;  
  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px; 
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea; 
}

.features-table thead td:first-child
{
  border-top: none;
}

/*Footer*/
.features-table tfoot td
{
  font: bold 1.4em Georgia;  
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px; 
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;
}

.features-table tfoot td:first-child
{
  border-bottom: none;
}

我的问题是表中没有显示那些图像按钮。如果我用chrome分析我的页面的html代码我可以看到标签是生成的，但是，我不知道为什么，我的按钮大小为0px x 0px。也许你们中的任何人都知道该怎么做？

Answer 1

您无法在div中添加table而不保留其结构。正如您在firebug中看到的那样，div忽略了table，body位于<table class="features-table"> <thead> <tr> <td></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>1</td> </tr> </thead> <tbody> <tr> <td> <div id="IDDIV" runat="server"></div> </td> </tr> </tbody> </table>内。结构应该是这样的。

 checking out Revision 03207bc49c5812f7e64f4e2dfafdf3de4cb59376 (origin/SwmOnlineHelp-v10.2)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f 03207bc49c5812f7e64f4e2dfafdf3de4cb59376
 > git rev-list 03207bc49c5812f7e64f4e2dfafdf3de4cb59376 # timeout=10
[Build] $ /bin/bash -e /tmp/hudson8040843434464635378.sh
[EnvInject] - Injecting environment variables from a build step.
[EnvInject] - Injecting as environment variables the properties file path 'tmp.properties'
[EnvInject] - Variables injected successfully.
Waiting for the completion of Build

无法在没有图像的情况下测试你的代码，所以不确定这是否能解决问题，但我想你应该从这开始，这将为你解决很多问题

Answer 2

我实际上不知道问题，但你可以做一些解决方法，直到其他人有解决方案。

不要添加按钮，只需添加一个piczure并使用动态参数将其链接到您的页面。就像你的情况下的一周数字。在你的链接文件中，你只需要分析参数，然后你就知道了如何按下tablecoulom。

有兴趣看看其他解决方案！希望有所帮助！

Answer 3

<asp:ImageButton>是ASP.NET服务器端控件......因此需要由ASP.NET创建。

您不能仅使用<asp:ImageButton>创建字符串，并期望系统将其识别为控件。我的猜测是，当你查看渲染的HTML时，你实际上看到<asp:ImageButton>而不是实际控件会产生什么（<input type="image">）。

为了做你想做的事情，你需要生成一系列控件，首先使用<asp:Literal>作为普通文本，然后使用<asp:ImageButton>作为按钮。

而不是使用<div>使用<asp:PlaceHolder>。

然后大致像这样构建你的控件......

private void buildHtmlTableString(List<Week> w)
{
    var sb = new System.Text.StringBuilder();
    foreach (Week element in w)
    {
        sb.Append("<tr>");
        sb.AppendFormat("<td> Week {0}</td>", element.weekNumber);
        sb.AppendFormat("<td>{0} €</td>", element.1);
        ...
        sb.AppendFormat("<td>{0} €</td>", element.10);
        sb.Append("<td>");
        myPlaceholder.Controls.Add(new System.Web.UI.WebControls.Literal(sb.ToString()));
        sb.Length = 0;

        var imgBtn = new System.Web.UI.WebControls.ImageButton
        {
            ID = element.1.ToString(),
            Width = new System.Web.UI.WebControls.Unit(20),
            Height = new System.Web.UI.WebControls.Unit(20),
            ImageUrl = @"~/detail.ico"
        };
        imgBtn.Click += new System.Web.UI.ImageClickEventHandler(text_Click);
        myPlaceholder.Controls.Add(imgBtn);
        sb.Length = 0;

        myPlaceholder.Controls.Add(new System.Web.UI.WebControls.Literal("</td></tr>");
    }
}

此外，在<div>中使用<tbody>是无效的HTML，但无论如何都会删除

按钮自动调整为0px x 0px

3 个答案: