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

我有一个带有值的php表。我想使两个表数据成为可编辑的。我有表格标题

任务、截止日期、员工、部门

。使用laravel eloquent从数据库中提取

td

值

<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

---

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

发生这种情况是因为您正在使用输入id“duedate”

将id更改为class

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

这会给你想要的结果

---在下面的注释后编辑：-----

查看此处的选择器：

var id=$（'#taskid'）.val（）

同样，您使用的是一个id（id始终只选择一个元素），而不是在输入中使用如下数据值：


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

var id=$（this）.data（'task id'）

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

var id=$（this.attr（'data task id'）
我已经对代码进行了如下编辑，效果很好

<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(){

        }
    });
});


$（document）.on（'change'，'.duedate'，function（）{
var duedate=$（this.val（）；
var id=$（this.data（“id”）；
$.ajax({
类型：'get'，
url:“{！！url:：to（'duedateupdate'）！！}”，
数据：{'id'：id，'duedate'：duedate}，
成功：功能（数据）{
},
错误：函数（）{
}
});
});
No。。它仍然会更新表的第一行中的duedate。请避免在html文档中使用重复的ID
$(document).on('change','.duedate',function(){

<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(){

        }
    });
});