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

使用像var field = $("#myField");这样的简单选择器来获取对话框中的字段。

http://jsfiddle.net/TCHdevlp/nyyhD/

正如您所看到的，将页面中的内容转换为模态

非常简单

Answer 2

这样的事情会起作用

<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();
}

将多个变量传递给jquery对话框表单

2 个答案: