c# - 单击按钮读取动态表值

Question

我在 jquery 方面几乎不需要帮助。我有一个从数据库中获取值的动态网格。有时网格可以有 5,6 ... 20 ... 30 ... 行，我必须在单击按钮时显示它们的值。标签中的值需要显示在一列中，文本框或 ddl 中的值需要显示在另一列中。

问题是标签的数量可以是 3、4 ..20... 有时第二列的值可以是文本框，有时是 ddl，这取决于数据库。

<table id="MainContent_gvKarakteristike" style="color:#333333;border-collapse:collapse;" cellspacing="0" cellpadding="4">
            <tbody><tr style="color:White;background-color:#507CD1;font-weight:bold;">
                <th scope="col">Karakteristike</th><th scope="col">&nbsp;</th><th scope="col">Opis</th>
            </tr><tr style="background-color:#EFF3FB;">
                <td>
                            <span id="MainContent_gvKarakteristike_Karakteristike_0" mycustomattr="foo" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Total_Thickness</span>


                        </td><td>
                            <span id="MainContent_gvKarakteristike_Label_0" class="IDKarakteristike" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">1</span>


                        </td><td>

                             <select name="ctl00$MainContent$gvKarakteristike$ctl02$ddlOpis" id="MainContent_gvKarakteristike_ddlOpis_0" margin-left="100px" class="ddl" style="font-family: Georgia; height: 35px; width: 142px; display: none;">

                </select>
                            <input name="ctl00$MainContent$gvKarakteristike$ctl02$txtBoxOpis" id="MainContent_gvKarakteristike_txtBoxOpis_0" margin-left="100px" class="txtbox" style="font-family:Georgia;height:28px;width:130px;" type="text">


                        </td>
            </tr><tr style="background-color:White;">
                <td>
                            <span id="MainContent_gvKarakteristike_Karakteristike_1" mycustomattr="foo" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Wear Layer thickness</span>


                        </td><td>
                            <span id="MainContent_gvKarakteristike_Label_1" class="IDKarakteristike" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">2</span>


                        </td><td>


                            <input name="ctl00$MainContent$gvKarakteristike$ctl03$txtBoxOpis" id="MainContent_gvKarakteristike_txtBoxOpis_1" margin-left="100px" class="txtbox" style="font-family:Georgia;height:28px;width:130px;" type="text">



                        </td>
            </tr><tr style="background-color:#EFF3FB;">
                <td>
                            <span id="MainContent_gvKarakteristike_Karakteristike_2" mycustomattr="foo" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Surface treatment
    </span>


                        </td><td>
                            <span id="MainContent_gvKarakteristike_Label_2" class="IDKarakteristike" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">5</span>


                        </td><td>

                             <select name="ctl00$MainContent$gvKarakteristike$ctl04$ddlOpis" id="MainContent_gvKarakteristike_ddlOpis_2" margin-left="100px" class="ddl" style="font-family:Georgia;height:35px;width:142px;">
                    <option value="1">Proteco Lacquer
    </option>
                    <option value="2">Proteco Hardwax Oil
    </option>
                    <option value="3">Classic Lacquer
    </option>
                    <option value="4">Proteco Natura
    </option>

                </select>
                            <input name="ctl00$MainContent$gvKarakteristike$ctl04$txtBoxOpis" id="MainContent_gvKarakteristike_txtBoxOpis_2" margin-left="100px" class="txtbox" style="font-family: Georgia; height: 28px; width: 130px; display: none;" type="text">


                        </td>
            </tr><tr style="background-color:White;">
                <td>
                            <span id="MainContent_gvKarakteristike_Karakteristike_3" mycustomattr="foo" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Pattern
    </span>



                        </td><td>
                            <span id="MainContent_gvKarakteristike_Label_3" class="IDKarakteristike" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">6</span>


                        </td><td>

                             <select name="ctl00$MainContent$gvKarakteristike$ctl05$ddlOpis" id="MainContent_gvKarakteristike_ddlOpis_3" margin-left="100px" class="ddl" style="font-family:Georgia;height:35px;width:142px;">
                    <option value="1">3 strip
    </option>
                    <option value="2">1 strip
    </option>

                </select>
                            <input name="ctl00$MainContent$gvKarakteristike$ctl05$txtBoxOpis" id="MainContent_gvKarakteristike_txtBoxOpis_3" margin-left="100px" class="txtbox" style="font-family: Georgia; height: 28px; width: 130px; display: none;" type="text">


                        </td>
            </tr><tr style="background-color:#EFF3FB;">
                <td>
                            <span id="MainContent_gvKarakteristike_Karakteristike_4" mycustomattr="foo" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP PIM product hierarchy
    </span>



                        </td><td>
                            <span id="MainContent_gvKarakteristike_Label_4" class="IDKarakteristike" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">9</span>


                        </td><td>


                            <input name="ctl00$MainContent$gvKarakteristike$ctl06$txtBoxOpis" id="MainContent_gvKarakteristike_txtBoxOpis_4" margin-left="100px" class="txtbox" style="font-family:Georgia;height:28px;width:130px;" type="text">


                        </td>
            </tr>
        </tbody></table>

这是按钮:

  <asp:Button ID="btnButton" runat="server" Text="Save"/>

这是我现在拥有的 jquery:

$('#MainContent_btnButton').click(function () {


              alert(
              '' +
              $("#MainContent_gvKarakteristike_Label_0 ").text() +
              '   ' + 
              $("#MainContent_gvKarakteristike_txtBoxOpis_0 ").val() +

              '\n' +
              '' +
              $("#MainContent_gvKarakteristike_Label_1 ").text() +
              '   ' +
              $("#MainContent_gvKarakteristike_txtBoxOpis_1 ").val() +
              '\n' +
              $("#MainContent_gvKarakteristike_Label_2 ").text() +
              '   ' +
              $("#MainContent_gvKarakteristike_txtBoxOpis_2 ").val() +
              '\n' +
              $("#MainContent_gvKarakteristike_Label_3 ").text() +
              '   ' +

              $("#MainContent_gvKarakteristike_ddlOpis_3").val() +
              '\n' +
              $("#MainContent_gvKarakteristike_Label_4 ").text() +
              '   ' +
              $("#MainContent_gvKarakteristike_txtBoxOpis_4 ").val() +
              '\n' 
              );
          });

点击按钮显示的结果是:

1   text1  -> random text written in textbox
2   text2
5   4    -> selected value in ddl
6   1

jquery 不好，因为第一列中的标签数量可能要大得多，而且我不知道第二列何时显示文本框和 ddl。

有人可以帮帮我吗？

提前致谢!

Answer 1

您可以通过遍历行及其列然后将它们全部放入您选择的对象或字符串中来从表中读取数据。

下面是一个创建objectArray的例子:

var myCollection=[];
$('#MainContent_gvKarakteristike tbody').find('tr:gt(1)').each(function(){
 var row = this;
 var myObj={
   karakteristike:valuefromType($(row).find('td:eq(0)').children()),
   label:valuefromType($(row).find($(row).find('td:eq(1)').children()),
   opis:valuefromType($(row).find($(row).find('td:eq(2)').children())
 };
 myCollection[myCollection.length]=myObj;
});

function valuefromType(control)
{
  var type = $(control).prop('nodeName').toLowerCase();
  switch(type)
  {
    case "input":
    return $(control).val();
    break;
    case "select":
    return $(control).val();
    break;
    case "label":
    return $(control).text();
    break;
    //add other types as for your need
  }
}

然后使用对象 myCollection 并通过序列化将其发送到服务器端。