Question

我设法通过jquery从表中获取值。问题是只在页面加载时加载值的数组，我需要刷新数组的内容，以便在单击按钮时从表中获取值。

表：

<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：

 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;

                           }
                       }

结果：

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

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

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

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

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

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

length: 6

我需要刷新按钮单击时获取此结果的数组。有谁可以帮助我吗？提前谢谢！

Answer 1

您可以将以下代码包装到函数中，然后在Button的OnClientClick属性中调用该函数。像这样：

function updateArray() {
    $('#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;
    });
}

然后是按钮：

<asp: Button ID="btnButton" runat="server" Text="Save" OnClientCLick="updateArray()" />

按钮单击时重新加载数组内容

1 个答案: