javascript - 将多个变量传递到 jquery 对话框表单

Question

我需要将多个变量发送到 jquery 对话框表单，以便用户可以编辑该条目。条目在页面上显示为 html 表，数据从 mysql 数据库加载。我想将行中的所有条目传递到 jquery 对话框表单，以便他们可以编辑它们并将其重新提交到数据库。我真的很茫然，我什至不知道从哪里开始。我见过人们谈论 jquery 中的 .data() 函数，但我不确定如何最好地将这些数据发送到弹出表单。

这是一个表单示例。我过去只是将数据发送到 update_contact.php，它将提取用户记录并将其放入表单中。但我喜欢 jquery 对话框形式，因为它可以将其保留在同一页面上。

<table width="600" cellpadding="4" class="tickets">
  <tr style="background-color:#736F6E;">
    <th width="225" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Name</a></b>
    </th>
    <th width="225" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Title</a></b>
    </th>
    <th width="150" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Work Phone</a></b>
    </th>
    <th width="150" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Actions</a></b>
    </th>
  </tr>
  <tr style="background-color:#FFFFFF">
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      <a href="#" class="clickTip38">Contact #1</a>
    </td>
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      Support Team Lead
    </td>
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      123-456-7890
    </td>
    <td>
      <center><a href="update_contact.php?search=38" class="clickTip" title="Edit Contact"><img src="/img/user_edit.png" border="0"></a><a href="#1#38" class="display-dialog" title="Delete Contact"><img src="/img/user_delete.png" border="0"></a><a href="vcard.php?id=38" class="clickTip" title="Download vCard"><img src="/img/vcard.png" border="0"></a></center>
    </td>
  </tr>
</table>

Answer 1

像这样的东西会起作用

<table width="600" cellpadding="4" class="tickets">
  <tr style="background-color:#736F6E;">
    <th width="225" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Name</a></b>
    </th>
    <th width="225" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Title</a></b>
    </th>
    <th width="150" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Work Phone</a></b>
    </th>
    <th width="150" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Actions</a></b>
    </th>
  </tr>
  <tr style="background-color:#FFFFFF">
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      <a href="#" class="clickTip38" onclick="EditContact()">Contact #1</a>
    </td>
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      Support Team Lead
    </td>
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      123-456-7890
    </td>
    <td>
      <center><a href="update_contact.php?search=38" class="clickTip" title="Edit Contact"><img src="/img/user_edit.png" border="0"></a><a href="#1#38" class="display-dialog" title="Delete Contact"><img src="/img/user_delete.png" border="0"></a><a href="vcard.php?id=38" class="clickTip" title="Download vCard"><img src="/img/vcard.png" border="0"></a></center>
    </td>
  </tr>
</table>

        <div id="modal" class="hidden">
    <div>
        <input type="text" id="txtName"/>
        <input type="text" id="Title"/>
        <input type="text" id="WorkPhone"/>
    </div>
</div>

JavaScript

function EditContact(){
    var tds = $(event.srcElement)
              .closest("tr").find("td");

    var selected = {
        name: $(tds[0]).text(),
        Title: $(tds[1]).text(),
        WorkPhone: $(tds[2]).text()
    };

    $("#txtName").val(selected.name);
    $("#Title").val(selected.Title);
    $("#WorkPhone").val(selected.WorkPhone);
    $("#modal").dialog();
}