Jquery 基于弹出窗口设置表中单元格的值

在最后一列中，我有一个数据表和一个名为“更新”的按钮

更新打开一个模型弹出窗口，用按钮所在行的内容填充它，并允许输入

我想将弹出窗口中输入的新值放回行中

我的一张桌子看起来像这样：

<table class="table table-hover table-bordered tablesorter" id="mainTable">
<thead><tr><th>Reset</th><th>Relationship</th><th>Family</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Phone#</th><th>Status&nbsp&nbsp&nbsp</th><th>Arrived?</th><th>Update</th></tr></thead><tbody><tr><td><div><button class="btn btn-primary myButton" disabled="disabled" id="resetButton" data-id="Samuel Rahimi">Reset</button></div></td><td id=relationship>Friend</td><td id=personName>Samuel Rahimi</td><td id=fname>Samuel</td><td id=lname>Rahimi</td><td id=email>unknown@gmail.com</td><td id=phone>1-212-555-1212</td><td id=Status> </td>
<td><div><button class="btn btn-primary myButton" id="updateButton" data-fname="Samuel" data-lname="Rahimi" data-email="unknown@gmail.com" data-phone="1-212-555-1212" data-note="" data-id="Samuel Rahimi">Update</button></div></td></tr>

ResetRelationshipFamilyFirst Name姓氏EmailPhone状态已发送？更新ResetFriendsSamuelRahimiSamuelRahimiunknown@gmail.com1-212-555-1212 
更新

以下是用于在模式中设置值的jquery脚本：

  <script>
$(function() 
{
$('button#updateButton').on('click', function (e) {
    var getIdFromRow = $(this).data('id');
    console.log(getIdFromRow)
    var x = $(this).data('fname')
    console.log(x)
    $('#newAttendeeFname').val($(this).data('fname'))
    $('#newAttendeeLname').val($(this).data('lname'))
    $('#newAttendeeEmail').val($(this).data('email'))
    $('#newAttendeePhone').val($(this).data('phone'))
    $('#newAttendeeNote').val($(this).data('note'))         
    $('#addAttendeeModal').modal('show')
    }
)
}


)
</script>

$（函数（）
{
$（'button#updateButton'）。在（'click'，函数（e）上{
var getIdFromRow=$（this）.data（'id'）；
console.log（getIdFromRow）
var x=$（this.data（'fname'））
console.log（x）
$（'#newAttendeeFname'）.val（$（this.data（'fname'））
$（'#newAttendeeName'）.val（$（this.data（'lname'））
$（'#newAttendeeMail'）.val（$（this.data（'email'））
$（'#newAttendee phone'）.val（$（this.data（'phone'））
$（'#newAttendeeNote'）.val（$（this.data（'note'））
$（'#addAttendeeModel'）.model（'show'））
}
)
}
)

下面是我试图将模态的内容返回到表行的尝试：

<script>
//
// This is the function that is called when the button for a new attendee is clicked
//
$(function() 
    {
        $('button#addAttendeeSubmit').on('click', function (e) {

            fname = document.getElementById ("newAttendeeFname").value
            lname = document.getElementById ("newAttendeeLname").value
            email = document.getElementById ("newAttendeeEmail").value
            note  = document.getElementById ("newAttendeeNote").value
            phone = document.getElementById ("newAttendeePhone").value

            newInfo = 'fname='+fname+'&lname='+lname+'&email='+email+'&phone='+phone+'&note='+note+'&action=updateAttendee'
            // for testing we can alert the variables 
            //alert(newInfo)
            console.log(newInfo)
                    // just put HELLO in there for now
            $(this).find("td#relationship").html('HELLO')


            // Call the php function to update the database
            $.ajax({type: "GET", url:"EventCheckInFunctions.php", data: newInfo})
            // refresh the page - good time to pick up any changes from DB
            //location.reload(true);
            // Really remove the modal so that values will all be reinitialized
            //$('#addAttendeeModal').remove();
            })
    }
)
</script>

//
//这是在单击新与会者的按钮时调用的函数
//
$（函数（）
{
$（'button#AddAttendee Submit'）。在（'click'，函数（e）上{
fname=document.getElementById（“newAttendeeFname”）.value
lname=document.getElementById（“NewAttendeeName”）.value
email=document.getElementById（“newAttendeeMail”）.value
note=document.getElementById（“NewAttendeNote”）.value
phone=document.getElementById（“NewAttendePhone”）.value
newInfo='fname='+fname+'&lname='+lname+'&email='+email+'&phone='+phone+'¬e='+note+'&action=updateatentendee'
//对于测试，我们可以警告变量
//警报（新信息）
console.log（newInfo）
//现在先打个招呼
$（this.find（“td#relationship”）.html（'HELLO'））
//调用php函数来更新数据库
$.ajax（{type:“GET”，url:“EventCheckInFunctions.php”，data:newInfo}）
//刷新页面-是从数据库获取任何更改的好时机
//位置。重新加载（true）；
//真正删除模式，以便所有值都将重新初始化
//$（'#addAttendeeModel'）。删除（）；
})
}
)

我试过各种各样的寻找，最近的等等

有什么想法吗（很抱歉，这个表看起来太乱了，我做了一个视图源代码来获取它，因为它实际上是用php生成的）

我认为您不需要“$（this.find）”，因为它没有引用表，而且是td。 尝试以下方法：

 $("#mainTable td#relationship").html('HELLO');

 $(this).closest('tr').find("td#relationship").html('HELLO');

---

要查找按钮所在的特定行，可以使用以下命令：

 $("#mainTable td#relationship").html('HELLO');

 $(this).closest('tr').find("td#relationship").html('HELLO');

---

或者，您可以使用jQuery.data来存储子索引。

Nice。。。但我如何引用“这”行。。。按下按钮的那一排？我想我可以在这上面做一个最接近的或一些变化？我编辑了我的答案以包括这个…如果你能添加一个唯一的行id？如果不是，我认为jQuery.data是最好的方法，对吧？我觉得这是我应该做的。我是“懒惰的”，不想在每一行的id中添加行号（当然，如果这样做是正确的话）。对不起，这太复杂了。再次编辑--当然，您只需要找到最近的

tr

。你仍然应该考虑让你的<代码> ID>代码>独一无二。