Question

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

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

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

我的表格看起来像这样：

<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>

以下是用于设置模态中的值的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>

这是我尝试将模态的内容重新放回表格行：

<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>

我尝试过各种各样的发现，最近等......

任何想法（抱歉看起来像这样一团糟，我做了一个视图源来获取它，因为它实际上是用PHP生成的）

Answer 1

我认为你不想要“$（this）.find”，因为它没有引用表格而且它是td的。尝试类似：

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

<小时/> 要查找按钮所在的特定行，您可以使用以下内容：

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

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

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

1 个答案: