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并通过序列化将其发送到服务器端。

Answer 2

@vikscool

感谢!!!

如果其他人需要它，那么看起来像这样的代码

 var myCollection = [];
                   $('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function () {
                       var row = this;
                       var myObj = {

                           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 "span":
                               return $(control).text();
                               break;
                           case "select":
                               return $(control).val();
                               break;
                               //add other types as for your need
                       }
                   }

按钮点击存储在数组中的结果为：

   0: Object { label: "1", opis: null }

1: Object { label: "2", opis: "test2" }

2: Object { label: "3", opis: "test3" }

3: Object { label: "5", opis: "3" }

4: Object { label: "9", opis: "test5" }

5: Object { label: "15", opis: "test88" }

长度：6

这是数组返回的内容

单击按钮读取动态表值

2 个答案: