Динамически установить отображение Нет / Блок строки таблицы с группой полей ввода Bootstrap - PullRequest
Новая
       13

Динамически установить отображение Нет / Блок строки таблицы с группой полей ввода Bootstrap

0 голосов
/ 28 апреля 2020

Я надеюсь, что кто-то может направить меня на исправление этой проблемы. Я использую bootstrap 3, мне нужно динамически установить отображение атрибута строки таблицы, которая имеет входные группы. При загрузке страницы остальные строки моей таблицы настроены на отображение: ни один не использует этот код: 

$(document).ready(function(){
  var current_range_count = $('#range_count').val();

    for (i = current_range_count; i <= 10; i++) {
        $("#advance_cost_range_" + i).css("display", "none");
    }

});

Но когда я устанавливаю отображение на блокировку, когда оно отображается с использованием строки кода ниже при событии onchange on одно из полей во второй строке таблицы, внешний вид которого - беспорядок. 

//Show next Cost Range
$("#advance_cost_range_3").css("display", "block");

Смотрите скриншот:

enter image description here

Это код строки таблицы. Это на самом деле 10 копий этого. Первые 2 строки таблицы отображаются, а остальные настроены на отображение: нет 

      <tr id="advance_cost_range_1">
        <td style=" width: 22.5%; ">
        <div class="form-group " style="margin-bottom: 0px;">
            <div class="input-group">
                    <input id="advance_price_min_1" type="number" min="0.00" value="0" step="1" class="form-control" ><span class="input-group-addon" >PHP</span>
            </div>
        </div>  
        </td>
        <td class="text-center" style=" width: 5%; ">
                    -
        </td>
        <td style=" width: 22.5%; ">
        <div class="form-group " style="margin-bottom: 0px;">
            <div class="input-group">
                    <input id="advance_price_max_1" type="number" min="0.00" value="1000" step="1" class="form-control" ><span class="input-group-addon" >PHP</span>
            </div>
        </div>  
        </td>
        <td class="text-center" style=" width: 5%; ">
                <i id="advance_price_operator_1" class="fa fa-border fa-times" aria-hidden="true"></i>
        </td>               
        <td style=" width: 22.5%;" >
            <div class="form-group " style="margin-bottom: 0px;">
            <div class="input-group">
                <input id="advance_price_rule_val_1" type="number" min="0.00" value="2" step="1" class="form-control" style=" width: 45%;">
                <select class="input-group-addon" id="advance_price_rule_op_1" style=" width: 55%;">
                  <option value="multiplier">Multiplier</option>
                  <option value="fixed">Fixed Markup</option>
                </select>
            </div>
            </div>

        </td>
        <td style=" width: 22.5%;visibility: hidden; " class="advance_price_compare_1">

            <div class="form-group " style="margin-bottom: 0px;">
            <div class="input-group">
                <input id="advance_price_rule_compare_val_1" type="number" min="0.00" step="1" class="form-control" style=" width: 45%;">
                <select class="input-group-addon" id="advance_price_rule_compare_op_1" style=" width: 55%;">
                  <option value="multiplier">Multiplier</option>
                  <option value="fixed">Fixed Markup</option>
                </select>
            </div>
            </div>              

        </td>
      </tr>
...