如何获取表格行中的所有 HtmlInputText 控件？

Posted 2023-03-05

【中文标题】如何获取表格行中的所有 HtmlInputText 控件？

【英文标题】：How to Get All HtmlInputText Controls Within a Table Row?

【发布时间】：2012-11-29 11:50:39

【问题描述】：

我正在尝试创建一个网页来创建小型播放列表。将数据输入字段后，需要将其保存到 XML 文件中。目前该表如下所示：

<%-- song list table --%>
<table runat="server" id="table" class="table">

<%-- info row --%>
<thead>
 <tr>    
  <td>Song Title</td>
  <td>Song Artist</td>
  <td>Song Album</td>
  <td><%-- column for delete button --%></td>
 </tr>
</thead>

<%-- input rows --%>
<tbody>
 <tr>
  <td><input runat="server" placeholder="Title" type="text" /></td>
  <td><input runat="server" placeholder="Artist" type="text" /></td>
  <td><input runat="server" placeholder="Album" type="text" /></td>

  <td>
   <a href="#">
    <img src="Images/Delete.png" onmouseover="this.src='Images/Delete-Hover.png'" onmouseout="this.src='Images/Delete.png'"  />
   </a>
  </td>
 </tr>
</tbody>

</table>

新行将通过 jQuery 动态添加。当用户点击保存时，我需要将表数据写入他们特定的 XML 文件。目前我的后端代码如下所示：

//for each row
foreach (htmlTableRow row in table.Rows)

 //create row info
 textWriter.WriteStartElement("Row");

 //for each cell
 foreach (HtmlTableCell element in row.Cells)
 
  //get inputs

  //write current input to xml
 

 //close row
 textWriter.WriteEndElement();

我的问题是我的代码从哪里开始，以便能够获取每个输入的值并将它们写入 XML。

【问题讨论】：

我已经编辑了你的标题。请参阅“Should questions include “tags” in their titles?”，其中的共识是“不，他们不应该”。

请考虑选择以下答案之一作为正确答案，或提供更多详细信息，以便我们提供进一步的帮助。

【参考方案1】：

您需要为元素提供一个 ID，以便引用它们。此外，任何动态添加的行都无法以这种方式访问​​；那是因为它们并不作为服务器控件存在于控件树中，而是纯粹的客户端控件。您必须使用Request.Form 集合访问这些。如果您也希望它们在回发中持久存在，则必须将它们动态添加到控件树中。

如果您使用的是 JQuery，那么获取客户端上的所有值并将值发送到 Web 服务或类似的东西会更高效、更容易。

【讨论】：

同意 RE：jQuery 发布到网络服务。我在回答中提供了一个如何收集数据的示例。

【参考方案2】：

我的建议是重新考虑您是如何收集数据的。我假设您将让这些信息使用$.ajax() 或类似的东西对您的服务器执行HTTP POST - 在服务器端，您想要获取Title 的所有实例， Artist 和 Album 字段，按行分组。

与其回发表格（一组显示数据但不代表数据的 UI 元素），不如考虑回发给服务器并让服务器期待 IEnumerable 的 Song 对象，这看起来像这样：

public class Song 
    public String Album  get; set; 
    public String Artist  get; set; 
    public String Title  get; set; 

现在，当您绑定表单本身时，您可以绑定如下内容：

<table>
 <thead>
  <tr>    
   <td>Song Title</td>
   <td>Song Artist</td>
   <td>Song Album</td>
   <td><%-- column for delete button --%></td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><input placeholder="Title" type="text" name="Songs[0].Title" /></td>
   <td><input placeholder="Title" type="text" name="Songs[0].Artist" /></td>
   <td><input placeholder="Title" type="text" name="Songs[0].Album" /></td>
  </tr>
 </tbody>
</table>

[0] 表示法表示此元素是称为Songs 的IEnumerable 的一部分，并且位于索引0 处。当您的 jQuery 脚本接着添加新行时，您只需增加索引。所以 - 一个新的行会是这样的：

 <tr>
  <td><input placeholder="Title" type="text" name="Songs[1].Title" /></td>
  <td><input placeholder="Title" type="text" name="Songs[1].Artist" /></td>
  <td><input placeholder="Title" type="text" name="Songs[1].Album" /></td>
 </tr>

唯一的诀窍是确保您的索引中永远不会出现间隙。 IE。 - 如果您有 5 行，并且删除了第三行，则需要重新索引第 4 行和第 5 行（通过递减 [#] 值）。

注意：以上所有内容均假设您使用的是服务器端绑定。

如果您已经在使用jQuery，您可能还会发现使用jQuery 解析table 的input 元素并将内容作为您可以直接控制的对象发布更简单。这使您根本不必进行任何索引。一个例子是这样的：

$('#submit-button').on('click', function (ev) 
    var songs = [];
    $('#table > tbody > tr').each(function (index, element) 
        var $tr = $(element);

        var album = $tr.find('input[placeholder=Album]').val();
        var artist = $tr.find('input[placeholder=Artist]').val();
        var title = $tr.find('input[placeholder=title]').val();

        songs.push( Album: album, Artist: artist, Title: title );
    );

    $.ajax(
        url: '/my/post/url',
        type: 'POST',
        data: songs
    );
);

在服务器端，您现在将收到 HTTP POST 到 /my/post/url 的有效负载，其中包含表中的歌曲数据 - 无需担心时髦的数据绑定语法或索引。

希望这会有所帮助。