Чтение динамических значений таблицы нажатием кнопки - PullRequest
Новая
       3

Чтение динамических значений таблицы нажатием кнопки

0 голосов
/ 23 мая 2018

Мне нужна небольшая помощь с 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, это второй столбец.

Может кто-нибудь помочь мне?

Спасибо заранее!

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

@ 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

Это то, что массив возвращает

0 голосов
/ 23 мая 2018

Вы можете прочитать данные из таблицы, обвив строки и их столбцы, а затем поместив их все в объект или строку по вашему выбору.

Ниже приведен пример создания * 1003.*: 

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 и отправьте его на серверную сторону, сериализовав его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...