javascript - 为什么不能从后面的代码 (vb.net) 读取 HTML 表格中的行？

Question

我有一个 HTML 表格，并通过按钮的 onclick 事件使用 Javascript 插入一行。

这是我的代码。

HTML:

<!-- language: lang-html -->

<table id="PopTable" class="imagetable" runat = "server" align="center">
    <tr>
        <th></th>
        <th>ShipTo</th>
        <th>CustName</th>
        <th>Alamat</th>
        <th>Dari</th>
        <th>Ke</th>
    </tr>
</table>

Javascript:

function AddRow(Shipid,custname, grup, valid, alamat)
{
    var temp11;
    valid = "YES";
    for (var i = 0; i < arrloc.length; i++)
    {
        temp11 = arrloc[i];
        if (Shipid == temp11){ valid = "No" };
    }
    if (valid == "YES"){
        var table = document.getElementById("PopTable");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        if (grup == "")
        {
            var element2 = document.createElement("select");
            var option1 = document.createElement("option");
            option1.innerHTML = "DK";
            option1.value = "1";
            element2.add(option1, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LK";
            option2.value = "2";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LJ";
            option2.value = "3";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LD";
            option2.value = "4";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LP";
            option2.value = "5";
            element2.add(option2, null); }
        else if (grup == "DK")
        {
            var element2 = document.createElement("select");
            var option1 = document.createElement("option");
            option1.innerHTML = "LK";
            option1.value = "1";
            element2.add(option1, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LJ";
            option2.value = "2";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LD";
            option2.value = "3";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LP";
            option2.value = "4";
            element2.add(option2, null);}
        else if (grup == "LK")
        {
            var element2 = document.createElement("select");
            var option1 = document.createElement("option");
            option1.innerHTML = "DK";
            option1.value = "1";
            element2.add(option1, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LJ";
            option2.value = "2";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LD";
            option2.value = "3";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LP";
            option2.value = "4";
            element2.add(option2, null);}
        else if (grup == "LJ")
        {
            var element2 = document.createElement("select");
            var option1 = document.createElement("option");
            option1.innerHTML = "DK";
            option1.value = "1";
            element2.add(option1, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LK";
            option2.value = "2";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LD";
            option2.value = "3";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LP";
            option2.value = "4";
            element2.add(option2, null);}
        else if (grup == "LD")
        {
            var element2 = document.createElement("select");
            var option1 = document.createElement("option");
            option1.innerHTML = "DK";
            option1.value = "1";
            element2.add(option1, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LJ";
            option2.value = "2";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LK";
            option2.value = "3";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LP";
            option2.value = "4";
            element2.add(option2, null);}
        else if (grup == "LP")
        {
            var element2 = document.createElement("select");
            var option1 = document.createElement("option");
            option1.innerHTML = "DK";
            option1.value = "1";
            element2.add(option1, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LJ";
            option2.value = "2";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LD";
            option2.value = "3";
            element2.add(option2, null);
            var option2 = document.createElement("option");
            option2.innerHTML = "LK";
            option2.value = "4";
            element2.add(option2, null);}


        var element3 = document.createElement("input");
        element3.type = "checkbox";

        cell5.innerHTML = grup;
        cell4.innerHTML = alamat;
        cell6.appendChild(element2);
        cell2.innerHTML = Shipid;
        cell3.innerHTML = custname;
        cell1.appendChild(element3);

        arrloc.push(Shipid);}
    }

在代码隐藏中，我尝试获取表的内容:

For i = 0 To PopTable.Rows.Count

    shipid = PopTable.Rows(1).Cells(1).InnerText
    'shipid = PopTable.Rows(1).Cells(1).innerhtml -- i also try this

    stringsql = "insert into cs_graph_ubah_dklk_log (shipid, dklk_awal, dklk_ubah, tgl_ubah, user_name, flag_proses, mid ) values ('" & shipid & "', '" & dklk_awal & "','" & dklk_ubah & "', sysdate , '" & user & "', 1, cs_graph_ubah_dklk_seq.nextval ) "
    dtsql = SPKOraConnGetDataWS.CreateDataSet(stringsql)

Next

我尝试通过 Javascript 插入 HTML 表格行，但在 VB.NET 中，结果是 rows.count 只有 1 行，并且该行只是标题。为什么会这样？在客户端，Javascript 成功地向表中添加行。

为什么代码隐藏只读取标题行？缺少什么？

如果您需要我提供更多信息，请询问。

Answer 1

主要原因可以在 Amir Sherafatian 的评论中发表:

创建网站时，将呈现所有 html - 具有 runat="server"属性的元素在页面执行期间在服务器端生成 1:1 对象。

请注意，页面执行在将 html 写入客户端时结束，然后除非您将一些数据存储在缓存/ session / View 状态/cookies 或任何其他持久存储中，否则所有与渲染页面相关的数据都会在网络服务器上丢失.

当客户端点击提交时，页面的状态从网页上的那些持久存储和输入中恢复(这基本上是一种形式，因此每次回传都会将所有输入/选择/隐藏字段发送回服务器)想象一下，那用户使用控制台通过自己的 java 脚本修改您的页面 - 它根本无法被服务器接受。 html 对回传上的 Web 服务器没有任何意义。唯一的通信方式是通过从表单字段映射的回发属性。

任何其他不是输入字段/隐藏字段的对象都是在开始页面执行时从 aspx/html(在您的服务器上)重建的。

您后面的代码只能看到标题行，因为在构建页面状态的表中只定义了标题行。

如果你想实现你的目标，你需要定义至少一个带有 runat=server"的隐藏字段，当你使用 JavaScript 添加/删除行时，你将向其中添加/删除数据。它的数据将被发送为服务器的表单回发参数。在那里你可以像访问隐藏字段一样访问它(正如我解释的那样，隐藏字段值将从回发参数重建)，读取数据，解析它并做任何你想做的事情。

如果你想要一个示例代码(ASP.Net C#)，请喊:)