Question

我做了一些搜索，并尝试了不同帖子的几个解决方案，但似乎无法让它们工作。基本的想法是......我正在定制一个现有的usercontrol，它将动态生成的数据放到一个行列表中。然后它有一个“编辑”链接按钮，用于执行回发并使用可编辑字段重建表。我找到了一些jQuery，我用它来将表转换为2行表，分成多列（比c＃中的数据创建/标记重新设计要容易得多）。当页面第一次加载时，它完美地工作。但是，当我单击“编辑”链接按钮时，它正确地执行回发，但jQuery不会触发。我尝试了几种配置无济于事。这是jQuery：

private void RegisterScripts()
{
    StringBuilder sbScript = new StringBuilder();
    sbScript.Append("\tvar tables = $('table[id*=\"tblAttribute\"]');\n");
    sbScript.Append("\tfor (var i = 0; i < tables.length; i++) {\n");
    sbScript.Append("\t\tvar newTable = document.createElement('table');\n");
    sbScript.Append("\t\tvar columns = 2;\n");
    sbScript.Append("\t\tfor(var c = 0; c < columns; c++) {\n");
    sbScript.Append("\t\t\tnewTable.insertRow(c);\n");
    sbScript.Append("\t\t\tfor(var r = 1; r < tables[i].rows.length ; r++) {\n");
    sbScript.Append("\t\t\t\tnewTable.rows[c].insertCell(r-1);\n");
    sbScript.Append("\t\t\t\tnewTable.rows[c].cells[r-1].innerHTML = tables[i].rows[r].cells[c].innerHTML;\n");
    sbScript.Append("\t\t\t\tnewTable.rows[c].cells[r-1].className = tables[i].rows[r].cells[c].className;\n");
    sbScript.Append("\t\t\t\ttables[i].rows[r].style.display = 'none';\n");
    sbScript.Append("\t\t\t}\n");
    sbScript.Append("\t\t}\n");
    sbScript.Append("\t\tnewTable.className = tables[i].className;\n");
    sbScript.Append("\t\ttables[i].parentNode.appendChild(newTable);\n");
    sbScript.Append("\t}\n");

    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "RowsToColumnsScript", sbScript.ToString(), true);

}

以下是Page_Load循环中的调用：

protected void Page_Load(object sender, EventArgs e)
{
    RegisterScripts();
    // Other Stuff //
}

我还尝试用RegisterClientScriptBlock()替换RegisterStartupScript()并得到相同的结果。我错过了什么？

编辑2：这是脚本，因为它被添加到客户端页面。我复制了页面源（减去我的缩写）：

<script type="text/javascript">
//<![CDATA[
var tables = $('table[id*="tblAttribute"]');
for (var i = 0; i < tables.length; i++) {
    var newTable = document.createElement('table');
    var columns = 2;
    for(var c = 0; c < columns; c++) {
        newTable.insertRow(c);
        for(var r = 1; r < tables[i].rows.length ; r++) {
            newTable.rows[c].insertCell(r-1);
            newTable.rows[c].cells[r-1].innerHTML = tables[i].rows[r].cells[c].innerHTML;
            newTable.rows[c].cells[r-1].className = tables[i].rows[r].cells[c].className;
            tables[i].rows[r].style.display = 'none';
        }
    }
    newTable.className = tables[i].className;
    tables[i].parentNode.appendChild(newTable);
}
// Other js registered from other usercontrols
</script>

Answer 1

尝试将jquery代码包装在ready函数

中

$(function(){
    // place your code here
});

<script type="text/javascript">
$(function(){
    //<![CDATA[
    var tables = $('table[id*="tblAttribute"]');
  for (var i = 0; i < tables.length; i++) {
    var newTable = document.createElement('table');
    var columns = 2;
    for(var c = 0; c < columns; c++) {
        newTable.insertRow(c);
        for(var r = 1; r < tables[i].rows.length ; r++) {
            newTable.rows[c].insertCell(r-1);
            newTable.rows[c].cells[r-1].innerHTML = tables[i].rows[r].cells[c].innerHTML;
            newTable.rows[c].cells[r-1].className = tables[i].rows[r].cells[c].className;
            tables[i].rows[r].style.display = 'none';
        }
    }
    newTable.className = tables[i].className;
    tables[i].parentNode.appendChild(newTable);
  }
   // Other js registered from other usercontrols
});
</script>

Answer 2

首先，你为什么不做这件事......

string script = @"var tables = $('table[id*=\'tblAttribute\']');
   for (var i = 0; i < tables.length; i++) {
   //rest of your script
";

这将使您的脚本更容易阅读和更改。白色空间将受到尊重。所以你不需要\ n和\ t字符。

之后，在浏览器中查看生成的HTML，并确保它在此处正确显示。使用浏览器的调试工具执行脚本，看看是否有任何错误。

或者只是将脚本嵌入.aspx页面而不是从Code Behind中添加脚本。

Answer 3

您的javascript希望您的表的ID包含（*=）字符串tblAttribute。看起来创建新可编辑表的javascript不会向其添加id属性。因此，当您的代码隐藏注册脚本并在每次回发时执行时，您没有看到它，因为您的新可编辑表格与$('table[id*="tblAttribute"]')条件不匹配。

您需要为新创建的表设置一个id，但我不能保证这种方法可行（取决于您的usercontrol如何构建您可能已在屏幕上显示的各种表）：

newTable.setAttribute("id", "tblAttribute" + i);

显然，id需要是唯一的，所以简单地将迭代器添加到tblAttribute可能会产生冲突，但这应该让你指向正确的方向。

修改

查看与UpdatePanel相关的更新评论，您可能会发现此答案有用： Registering scripts with an UpdatePanel

无法在帖子后面获取jQuery

3 个答案: