将表格单元格的内容传输到jQuery加载的文档中

时间:2012-04-18 16:04:57

标签: php jquery

我目前有一个当前格式的表格:

ID  Client Info  Case Detail  Accident Date  Case Opened  No Days  Function
--  -----------  -----------  -------------  -----------  -------  --------

包含从数据库中提取的动态信息。

ID列特别重要,因为当用户点击功能列下的“管理”按钮时,我需要从此单元格中提取数据。

现在,这是用户点击“管理”按钮时运行的代码。

<script>
  $(document).ready(function () {
    $(".manage").click(function () {
    $('#casesHeading').hide("slow");
    $('#casesTable').hide("slow");
    $('#results').load('components/manage.php');
    });
    });
</script>

隐藏标题和表格,并在结果div中加载“manage.php”页面。

但我只是想知道是否还有我将ID单元格的内容(每行各不相同)转移到manage.php文件(当前为空)中。 < / p>

因此,如果用户点击ID单元格数据 233-cv 的行,则此信息将转移到manage.php文件中。希望我有意义。我读了jQuery .find函数,它有一些意义,但我不知道如何在这个实例中加入它。

更新1

我正在努力完成类似于http://jsfiddle.net/ZjvAz/的某些事情。

更新2

我尝试过以下代码,但似乎没有用。

<script>
  $(document).ready(function () {
$(".manage").click(function() {
    var clickedButton = $(this);
        clickedButton.parent().find(".result").text(
            clickedButton.parent().parent().parent().find('.caseID').text()
        );
    });
});
</script>

2 个答案:

答案 0 :(得分:1)

  

jQuery.load(handler(eventObject))返回:jQuery

     

描述:将事件处理程序绑定到“加载”JavaScript事件。

由于'components/manage.php'不是事件处理程序 - 你还想做什么?

如果您想从服务器请求数据(同时向其发送smoe ID),您应该阅读jQuery.ajax( url [, settings] )函数。

http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/load-event/

答案 1 :(得分:1)

我希望我的manage.php文件将案例ID作为参数。它将以manage.php?caseId=123

等方式调用

如果您可以控制生成的数据,则可以生成所需信息以进入按钮。不需要jquery代码来遍历DOM到ID字段。我只是在表源

中生成这样的东西
<tr>
  <td class="id">123</td>
  ...
  <td class="function">
    <button class="manage" onclick="loadManagementPage(123)">manage</button>
  </td>
</tr>

如果您无法控制HTML源并且需要导航,那么您最好的朋友可能正在使用closest()来导航dom。使用它来查找行元素tr

出于自我记录的目的,我不是在这里使用链接

$( '.manage' ).click(function(){

  // find the row we are in
  var $self = $( this );
  var $row = $self.closest( 'tr' );

  // read the id
  var $idCell = $row.find( 'td.id' );
  var caseId = $idCell.text();

  // locate an area on the page and dynamically load in some content
  var $target = $row.find( 'td.result' ); // find the result cell
  var $target = $( '#knownId' )           // *OR* find a div with a known id
  $target.load( 'manage.php?caseId=' + caseId );
});