Изменение строк таблицы в раскрывающемся списке не работает - PullRequest
Новая
       10

Изменение строк таблицы в раскрывающемся списке не работает

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

У меня есть страница для хранения информации о пользователях, разделенная на 4 страницы.Я хочу изменить некоторые строки, которые находятся на 4-й странице в опции выбора, расположенной на первой странице.Я использую jQuery для этого, но в настоящее время не удается.Вот мой код, пожалуйста, поправьте меня. 

$(document).ready(function () {
            $('#ddlCategory').change(function () {
                if (this.value == "Others") {
                    $('#Other').show();
                } else {
                    $('#Other').hide();
                }

            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
     </head>
    <body>
    <select id="ddlCategory">
                        <option>Choose</option>
                        <option value="Value1">Value1</option>
                        <option value="Value2">Value 2</option>
                        <option value="Others">Others</option>
                    </select>
    <table>
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" Text="Category: " />
                </td>
                <td>
                    
                </td>
            </tr>
    
            <tr id="Other" style="display: none">
              <table>

              <tbody>
              <tr>
                <td>
                    <input id="txtOthers" type="text" runat="server" />
                </td>
              </tr>
                <tr>
                <td>
                    <input id="txtOthers" type="text" runat="server" />
                </td>
              </tr>
               <tr>
                <td>
                    <input id="txtOthers" type="text" runat="server" />
                </td>
              </tr>
          </tbody>      
       </table>

             
            </tr>
        </table>
    </body>
    </html>

1 Ответ

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

Использование вложенных table иногда создает конфликт в способе отображения элементов.Если вы поместите ID и style на table, а не на контейнер tr, он будет работать, как в следующем примере: 

$(document).ready(function () {
            $('#ddlCategory').change(function () {
                if (this.value == "Others") {
                    $('#Other').show();
                } else {
                    $('#Other').hide();
                }

            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
     </head>
    <body>
    <select id="ddlCategory">
                        <option>Choose</option>
                        <option value="Value1">Value1</option>
                        <option value="Value2">Value 2</option>
                        <option value="Others">Others</option>
                    </select>
    <table>
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" Text="Category: " />
                </td>
                <td>
                    
                </td>
            </tr>
    
            <tr>
              <table id="Other" style="display: none">

              <tbody>
              <tr>
                <td>
                    <input id="txtOthers" type="text" runat="server" />
                </td>
              </tr>
                <tr>
                <td>
                    <input id="txtOthers" type="text" runat="server" />
                </td>
              </tr>
               <tr>
                <td>
                    <input id="txtOthers" type="text" runat="server" />
                </td>
              </tr>
          </tbody>      
       </table>

             
            </tr>
        </table>
    </body>
    </html>
...