как мы представляем каждую строку - PullRequest
Новая
       9

как мы представляем каждую строку

1 голос
/ 29 сентября 2019

Мне нужно подать каждую петлю строк.В моей нынешней ситуации отправка только моего первого ряда.Всякий раз, когда вы нажимаете на кнопку отправки, он должен выполнять только эту конкретную строку.Как я могу решить эту проблему?

снимок экрана: https://ibb.co/x8y6X94

// моя форма 

 <form action="">
                <table class="table table-hover table-centered m-0 table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Designation</th>
                            <th>Account Number</th>
                            <th>Attendance</th>
                            <th>Rate</th>
                            <th>Loan </th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="salaryData">
                    </tbody>
                </table>
                </form>

ниже кода показывает, выборка данных из базы данных и вставка этих данныхtbody, идентификатор tbody - # salaryData 

success: function(data) {
                    // alert('test');
                    var html = '';
                    var i;
                    for (i = 0; i < data.length; i++) {
                        html += '<tr>' +

                            '<td>' + data[i].emp_name + ' </td>' +
                            '<td>' + data[i].cat_name + '</td>' +
                            '<td>' + data[i].emp_account_number + '</td>' +
                            '<td>' +
                            '<input type="text" class="form-control" id="attendance"  name="attendance" placeholder="Attendance" required>' +
                            '</td>' +
                            '<td>1</td>' +
                            '<td>' +
                            '<input type="text" class="form-control" id="loan"  name="loan" placeholder="Loan" required>' +
                            '</td>' +
                            '<td>' +
                            '<a href="javascript:;" class="btn btn-primary item-edit" id="btnSave">Submit</a>' +
                            '</td>' +

                            '</tr>';
                    }
                    $('#salaryData').html(html);

// отправить код 

$(function() {

    $('#salaryData').on('click', '.item-edit', function() {
        var row = $(this).closest("tr")
        var attendance = row.find("[name=attendance]").val();
        var loan = row.find("[name=loan]").val();

        $.ajax({
                type : "POST",
                url  : "<?php echo site_url('con_salary/testSalary')?>",
                dataType : "JSON",
                data : {attendance:attendance , loan:loan},
                success: function(data){
                    if(data==1 ){
                        $('#btnSave').prop('disabled', false);


                    }
                    else{
                        $('#btnSave').prop('disabled', true);

                    }
                }
            });
            return false;




    });
});

Ответы [ 2 ]

0 голосов
/ 29 сентября 2019 
$(function() {
    $('#salaryData').on('click', '.item-edit', function() {
        var Selected = $(this).closest('tr');
        var attendance = $('#attendance', Selected).val();
        var loan = $('#loan', Selected).val();
        alert(attendance);
    });
});
0 голосов
/ 29 сентября 2019

Во-первых, вы должны убедиться, что любые id s, которые есть в DOM , являются уникальными .Прямо сейчас вы постоянно используете id="btnSave", id="attendance" и id="loan" в таблице.Но ваш обработчик кликов настроен правильно (с использованием делегирования и .item-edit), и, насколько я могу судить, вы можете просто избавиться от этих идентификаторов.

В обработчике кликов используйте this или event.currentTarget для ссылки на кнопку, на которую нажали.Вы можете получить строку для этой кнопки, используя closest("tr").Затем вы можете найти данные о посещаемости и ссуде через find, используя их name s.

Так, например: 

$(function() {

    $('#salaryData').on('click', '.item-edit', function() {
        var row = $(this).closest("tr");
        var attendance = row.find("[name=attendance]").val();
        var loan = row.find("[name=loan]").val();

        alert(attendance);

    });
});

Live Пример: 

$(function() {

    $('#salaryData').on('click', '.item-edit', function() {
        var row = $(this).closest("tr");
        var attendance = row.find("[name=attendance]").val();
        var loan = row.find("[name=loan]").val();

        alert(attendance);

    });
});

var data = [
    {emp_name: "Joe Bloggs", cat_name: "cat1", emp_account_number: 1234},
    {emp_name: "Muhammad Al-Rashad", cat_name: "cat2", emp_account_number: 5678},
    {emp_name: "Elena Gonsalez", cat_name: "cat2", emp_account_number: 9876}
];
// alert('test');
var html = '';
var i;
for (i = 0; i < data.length; i++) {
    html += '<tr>' +

        '<td>' + data[i].emp_name + ' </td>' +
        '<td>' + data[i].cat_name + '</td>' +
        '<td>' + data[i].emp_account_number + '</td>' +
        '<td>' +
        '<input type="text" class="form-control" name="attendance" placeholder="Attendance" required>' +
        '</td>' +
        '<td>1</td>' +
        '<td>' +
        '<input type="text" class="form-control" name="loan" placeholder="Loan" required>' +
        '</td>' +
        '<td>' +
        '<a href="javascript:;" class="btn btn-primary item-edit">Submit</a>' +
        '</td>' +

        '</tr>';
}
$('#salaryData').html(html);
<div id="salaryData"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...