0

我需要将多个变量发送到 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>
4

2 回答 2

0

使用简单的选择器，例如var field = $("#myField");在对话框中获取您的字段。

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

如您所见，将页面中的某些内容转换为模态非常简单

于 2013-09-25T15:45:05.327 回答
0

像这样的东西会起作用

<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();
}
于 2013-09-25T15:57:41.613 回答