Question

我有一个带有值的php表。我想使两个表数据可编辑。我有表头Task, Duedate, Staff, Department。 td值使用laravel雄辩地从数据库中提取。

<table class="table table-striped">
                <thead>
                    <tr><th scope="col">Task</th><th scope="col">Duedate</th><th scope="col">Staff</th><th scope="col">Department</th></tr>
                </thead>
                @foreach($tasks as $task)

                    <input type="text" id="taskid" name="taskid" value="{{$task->id}}" hidden>

                    <tr class="tabletd"><td scope="col" >{{$task->task}}</td>
                        <td scope="col" contenteditable="true">
                            <input type="date" name="duedate" id="duedate" class='form-control form-control-sm' value="{{$task->duedate}}" style="width:135px;" >
                        </td>

                        <td scope="col">{{$task->user->name}}</td><td scope="col">{{$task->department->title}}</td>

            </tr></table>   @endforeach

然后我使用ajax更新服务器中的值。

$(document).ready(function(){

$(document).on('change','#duedate',function(){
    var duedate=$(this).val();
    var id = $('#taskid').val();
    $.ajax({
        type:'get',
        url:'{!!URL::to('duedateupdate')!!}',
        data:{'id':id, 'duedate':duedate},
        success:function(data){
            document.getElementById("updatemsg").hidden = false; 
            setTimeout( function (){
                document.getElementById("updatemsg").hidden = true; 
            }, 2000);

        },
        error:function(){

        }
    });
});

运行良好。但是它仅更新表的第一行。如何更新其他行中的值。

Answer 1

之所以会这样，是因为您使用的输入ID是“ duedate”

将id更改为class

<input type="date" name="duedate" class='form-control form-control-sm duedate' value="{{$task->duedate}}" style="width:135px;" >

，然后在事件监听器中使用类选择器：

$(document).on('change','.duedate',function(){

这应该给您想要的结果

---在以下评论后进行编辑：-----

在这里查看选择器：
var id = $('#taskid').val();

再次，您正在使用一个id（一个id将始终只选择一个元素），而不是像这样在输入中使用数据值：

<input type="date" data-task-id="{{$task->id}}" class="duedate" class='form-control form-control-sm' value="{{$task->duedate}}" style="width:135px;" >

然后您可以在ajax中使用它：

var id = $(this).data( 'task-id' );

我发现有时data（）会给我带来问题，如果发生这种情况，请使用此方法：

var id = $(this).attr( 'data-task-id' );

Answer 2

我已经如下代码编辑了我的代码，并且效果很好

<input type="date" name="duedate"  contenteditable="true" data-id="{{$task->id}}" data-column="duedate"  class="form-control form-control-sm duedate"  value="{{$task->duedate}}" style="width:135px;" >


$(document).on('change','.duedate',function(){
    var duedate = $(this).val();
    var id = $(this).data("id");
    $.ajax({
        type:'get',
        url:'{!!URL::to('duedateupdate')!!}',
        data:{'id':id,'duedate':duedate},
        success:function(data){

        },
        error:function(){

        }
    });
});

如何在javascript中查找特定表数据的行值

2 个答案: