Как перезаписывать данные в одном поле по нажатию разных кнопок в из столбца таблицы?

Рейтинг: 0Ответов: 1Опубликовано: 19.06.2023

Есть поля Polyclinic, Doctor's field и Doctor's name. По нажатию на ссылки Select, данные из ячеек строки должны подставляться в поле. Проблема в том, что заносятся данные только из первой строки, ссылки из других строк не могут подставить данные из остальных строк в поля. Подскажите, пожалуйста, в чём может быть проблема?

HTML:

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Polyclinic:</strong>                                         
                    <div class="col-sm" id="js-result_p"></div>
                </div>
            </div></br>   

            <div class="col-xs-12 col-sm-12 col-md-18">
                <div class="form-group">
                    <strong>Doctor's field:</strong>                
                    <div class="col-sm" id="js-result_df"></div>
                </div>
            </div></br>
            
            <div class="col-xs-12 col-sm-12 col-md-18">
                <div class="form-group">
                    <strong>Doctor's name:</strong>                
                    <div class="col-sm" id="js-result_dn"></div>
                </div>
            </div></br>

            <table class="table table-bordered" id="filter-table">
                <tr>
                    <th>Name</th>
                    <th>Field</th>
                    <th>Polyclinic</th>
                </tr>
                <tr class='table-filters'>
                    <td></td>
                    <td>
                        <select name="doctor_field" class="custom-select ">
                            <option value=""> </option>
                            @foreach($doctors as $doctor)
                                <option class="field" value="{{ $doctor->field }}"> {{ $doctor->field }} </option>
                            @endforeach
                        </select></br>
                    </td>
                    <td>
                        <select name="polyclinic" class="custom-select">
                            <option value=""> </option>
                            @foreach($polyclinics as $policlynic)
                                <option value="{{ $policlynic->name }}"> {{ $policlynic->name }} </option>
                            @endforeach
                        </select></br>
                    </td>
                </tr>
                
                @foreach ($doctors as $doctor)
                <tr class='table-data'>
                    <td>
                        <input type="hidden" class="doctor_name" value="{{ $doctor->name }}">
                        {{ $doctor->name }}
                    </td>
                    <td>
                        <input type="hidden" class="doctor_field" value="{{ $doctor->field }}">
                        {{ $doctor->field }}
                    </td>
                    <td>
                        <input type="hidden" class="poly_name" value="{{ $doctor->polyclinic->name }}">
                        {{ $doctor->polyclinic->name }}
                    </td>
                    <td>
                        <a class="done">Select</a>
                    </td>
                </tr>
                @endforeach
            </table>

JS:

$(document).ready(function() { 
    $(document).on('click','.done', function(){
        let polyclinic = $('.poly_name').val();
        let doctor_field = $('.doctor_field').val();
        let doctor_name = $('.doctor_name').val();
        $('#js-result_p').html(' ' + polyclinic);
        $('#js-result_df').html(' ' + doctor_field);
        $('#js-result_dn').html(' ' + doctor_name); 
    });
}
javascript html jquery table
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Ошибка была очевидной: необходимо было пройтись по строкам таблицы через массив, записывая значения ячеек таблицы в массив. А чтобы срабатывала ссылка Select на нужной строке, нужно было задать в html-коде id для неё, чтобы далее, в цикле, можно было сравнивать его с номером итерации (row).

 <a class="done" id="{{ $doctor->id-1 }}" name="name">Select</a>

JS:

let $rows = $('table').find('.table-data'); // строки из значений, а не фильтров
    $rows.each(function(row){ // перебор по строкам
        let data_row = [];

        $(this).find('td').each(function(){ //перебор по столбцам
            data_row.push($(this).text()); // добавляем значения ячеек в массив (имя, обл., пол-ка)    
        });
        
        $(`#${row}`).on('click', function(){
            if($(this).attr('id') == row){
                $('#js-result_dn').html(' ' + data_row[0]);
                $('#js-result_df').html(' ' + data_row[1]);
                $('#js-result_p').html(' ' + data_row[2]);
            } 
        });        
    });