Правильный синтаксис для дочернего атрибута

Question

Подскажите пожалуйста как наиболее правильно решить след. вопрос. Есть динамические поля в таблице( добавляем кликом). Можно ли, ЕСЛИ ЕСТЬ элемент tr c id="addr(N)" >1 то у элемента tr c id='addr(N-1)" изменить атрибуты id у его td ("number" и "val")

  $(document).ready(function(){
                        var i=1;
                        $("#add_row").click(function(){b=i-1;
                            $('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
                            $('#tab').append('<tr id="addr'+(i+1)+'"></tr>');
                            i++;
                        });
                        $("#delete_row").click(function(){
                            if(i>1){
                                $("#addr"+(i-1)).html('');
                                i--;
                            }
                            calc();
                        });
});

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab" style="border:2">
  <tbody>
    <tr id="addr1">
      <td id="number">1</td>
      <td id="val">Value1-2</td>
    </tr>
 
  </tbody>
  <div>
  <button id="add_row" class="pull-left btn btn-info btn-mini " style="margin-left: 5%">Добавить строку</button>
 <button id='delete_row' class="pull-right btn btn-danger btn-mini">Удалить строку</button>
  </div>
   
</table>

Answer 1

Разметка:

<table id="tab" style="border:2">
    <tr class='empty'>
        <td>
            <input class='name'>
        </td>

        <td>
            <input class='barcode'></td>
        <td>
            <input class='artikul'>
        </td>
        <td>
             <input class='artikul_original'>
        </td>
    </tr>
</table>

В разметке убрал id, если они реально нужны, можете добавлять их в коде с инкрементом цифры.

Код:

var name, barcode, artikul, artikul_original;
    //парсим json, чтобы получить значение для внесения в каждый инпут, раскидываем значения по переменным
//далее присваиваем инпутам значения переменных
    $('.empty').children().children('.name').val(name); 
    $('.empty').children().children('.barcode').val(barcode); 
    $('.empty').children().children('.artikul').val(artikul); 
    $('.empty').children().children('.artikul_original').val(artikul_original); 
    $('.empty').removeClass('empty'); // убираем у текущей строки класс пустой
    $('#tab').append(' <tr class="empty"> <td> <input class="name"> </td> <td>  <input class="barcode"> </td> <td>  <input class="artikul"> </td> <td>  <input class="artikul_original"> </td> </tr>'); // добавляем новую строку с классом empty, чтобы в следующей итерации к ней обратиться

Код идет к строке с классом empty, проваливается на 2 уровня к потомкам (инпутам) и заполняет каждый в соответствии с классом. Потом убивает у строки класс empty, чтобы следующая итерация не затронула эту строку. Затем создает новую пустую строку с целевым классом. Если я вас понял правильно, это решает задачу) Если нужна помощь в добавлении id, то пишите, дополню

БЛОГ НА HUSL

Правильный синтаксис для дочернего атрибута

Ответы (1 шт):