如何在 javascript 中动态设置 ASP 元素 ID

Question

正如你在下面看到的，我有一个循环，我在其中创建了一些ASP标签。

function func(val) {
    var mod = Math.ceil(val / 9);
    for (var i = 0; i < mod; i++) {
        html = '<div class="carousel-item">
                  <table>
                    <tr>
                      <td>Temp ' + parseInt(i * 9 + 1) + '</td>
                      <td>Temp  ' + parseInt(i * 9 + 2) + '</td>
                      <td>Temp  ' + parseInt(i * 9 + 3) + '</td>
                    </tr>
                    <tr>
                      <td><asp:Label ID="TempCL1" runat="server" Text="xxx"></asp:Label></td>
                      <td><asp:Label ID="TempCL2" runat="server" Text="xxx"></asp:Label></td>
                      <td><asp:Label ID="TempCL3" runat="server" Text="xxx"></asp:Label></td>
                    </tr>
                  </table>
                </div>';
              $(".carousel-inner").html($(".carousel-inner").html() + html);
        }
    }

我的代码工作正常，但我需要修改标签 ID。例如：从

'<tr><td class="Valorppal"><asp:Label ID="TempCL1" runat="server" Text="xxx"></asp:Label></td>'

到类似的东西

'<tr><td class="Valorppal"><asp:Label ID="TempCL' + parseInt(i * 9 + 1) + '" runat="server" Text="xxx"></asp:Label></td>'

但是我收到一个错误("TempCL" + parseInt(i * 9 + 1( + '" 不是有效的标识符。

Answer 1

看起来你没有真正的理由使用 <asp:Label> ，所以我用 <span> 标签替换了它们。

此外，我在每行末尾添加了长 html 字符串的，这是在 Javascript 中创建多行字符串文字所必需的，常规引号作为分隔符。

最后，我使用了jQuery .append()它做了你所做的，同时更具可读性。

工作代码，至少对于您给出的部分：

function func(val) {
    var mod = Math.ceil(val / 9);
    for (var i = 0; i < mod; i++) {
        var html =
'<div class="carousel-item">
  <table>
    <tr>
      <td>Temp ' + (i * 9 + 1) + '</td>
      <td>Temp ' + (i * 9 + 2) + '</td>
      <td>Temp ' + (i * 9 + 3) + '</td>
    </tr>
    <tr>
      <td><span id="TempCL' + (i * 9 + 1) + '">xxx</span></td>
      <td><span id="TempCL' + (i * 9 + 2) + '">xxx</span></td>
      <td><span id="TempCL' + (i * 9 + 3) + '">xxx</span></td>
    </tr>
  </table>
</div>';
        $(".carousel-inner").append(html);
    }
}
func(23);

td { border: solid 1px green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-inner"></div>

Answer 2

请将 asp：label 的 id 也动态如下：-

<asp:Label ID="TempCL'+parseInt(i * 9 + 2)+'" runat="server" Text="xxx"></asp:Label>

希望它有效！