Таблица не отображается с помощью jQuery?

Question

Таблица не отображается с помощью jQuery?

0

У меня есть опция выбора. Когда пользователь выбирает параметр, я хочу добавить строку в таблицу. Например, если пользователь выбирает 2, я хочу добавить 2 строки в таблицу, но моя строка не отображается.

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<p><strong>Select No of Activites You Want To Fill Up:</strong>
   <select id="noAct">
      <option value="1>1</option>
      <option value="2">2</option>
      <option value="3">3</option>
   </select>


    <table class="table table-bordered" id="tables">
        <tr>
            <th>SN</th>
            <th>Activity Description</th>
            <th>Unit</th>
            <th>Weightage</th>
            <th>100</th>
            <th>75</th>
            <th>50</th>
            <th><50</th>
        </tr>

    </table>
<script>
    function displayTable()
    {
        var value = $("#noAct").val();

        $("#tables").empty();
        //for loop to display the no of tables required
        for ( var i=0; i < value; i++ )
        {
            //display the table
            $("#tables").append("<tr>
                                                    <td>1</td>
                                                    <td>Web Site</td>
                                                    <td>Time</td>
                                                    <td>20</td>
                                                    <td>1 days</td>
                                                    <td>2 days</td>
                                                    <td>3 days</td>
                                                    <td>4 days</td>
                                                 </tr>

                ");

        }
    }

    $( "select" ).change( displayTable );
    displayTable();
</script>

Crestamr 31 март 2014, в 07:03

Источник

Теги:

jquery

select

html-table

row

2 ответа

0

попробуй это:

function displayTable()
    {
       var value = $("#noAct").val();

      $("#tables").empty();
        //for loop to display the no of tables required
        for ( var i=0; i < value; i++ )
        {
            //display the table
            $("#tables").append('<td>1</td><td>Web Site Maintenance</td><td>Time</td><td>20</td><td>1 days</td><td>2 days</td> <td>3 days</td><td>>3 days</td>');

        } 
    }

        $( "select" ).change(displayTable);

живая демонстрация

Awlad Liton 31 март 2014, в 02:35

0

Просто изменил, но все еще не отображается !!
Crestamr 31 март 2014, в 04:25
0

@ user3374272: попробуй мой обновленный ответ
Awlad Liton 31 март 2014, в 04:34
0

Я не могу найти решение там. Можете быть более конкретными!!
Crestamr 31 март 2014, в 04:37
0

ты тестировал в демо? вам не нужно менять HTML. у вас есть дополнительный вызов функции в JQuery просто попробуйте мой JQuery. он должен работать.
Awlad Liton 31 март 2014, в 04:45

Показать ещё 2 комментария

Ещё вопросы

Просто изменил, но все еще не отображается !!
@ user3374272: попробуй мой обновленный ответ
Я не могу найти решение там. Можете быть более конкретными!!
ты тестировал в демо? вам не нужно менять HTML. у вас есть дополнительный вызов функции в JQuery просто попробуйте мой JQuery. он должен работать.

Kiranramchandran · Accepted Answer · 2014-03-31T01-51-00.000Z

Попробуй это

HTML

<select id="noAct">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
   </select>


    <table  class="table table-bordered">
        <tr>
            <th>SN</th>
            <th>Activity Description</th>
            <th>Unit</th>
            <th>Weightage</th>
            <th>100</th>
            <th>75</th>
            <th>50</th>
            <th><50</th>
        </tr>
          <tbody id="tbodyappend">
                </tbody>
    </table>

JS

$(document).ready(function(){

    function displayTable()
    {
       var value = $("#noAct").val();

      $("#tbodyappend").empty();
        //for loop to display the no of tables required
        for ( var i=0; i < value; i++ )
        {
            //display the table
            $("#tbodyappend").append('<tr><td>'+(i+1)+'</td><td>Web Site Maintenance</td><td>Time</td><td>20</td><td>1 days</td><td>2 days</td> <td>3 days</td><td>>3 days</td></tr>');

        } 
    }

        $( "select" ).change(displayTable);

});

ЖИЗНЬ ДЕМО ЗДЕСЬ