用户单击时,使用Jquery检索动态表的行信息

时间:2018-08-21 07:45:35

标签: javascript jquery

我是Jquery的新手。我正在逐一学习事物。我的要求是创建一个动态的jquery数据表。因此,我按以下方式创建: 变量formattedCKEY是我用于动态生成表ID的动态值

var issueTableId = "issuetable_"+formattedCKEY;
var $issuetable = $("
<table  id='" + issueTableId + "' class='stripe nowrap'  style='position:relative; top:0px; width:95%;'></table>
");
$issuetable.append('
<thead>
   ').children('thead')
   .append('
   <tr />
      ').children('tr')
      .append('
      <th nowrap>Select</th>
      '+
      '
      <th nowrap>Priority</th>
      ' +
      '
      <th nowrap>Issue ID</th>
      ' +
      var $tbody = $issuetable.append('
<tbody />
   ').children('tbody');
   $.each(cases, function () {
   $tbody.append('
   <tr />
      ').children('tr:last')
      .append('
      <td nowrap><input type="checkbox" />&nbsp;</td>
      ')
      .append('
      <td nowrap>' + $(this).find("PRTY").text() + '</td>
      ')
      .append(sourceRow)
      .append('
      <td nowrap>' + $(this).find("ISSUEID").text() + '</td>
      ');
      });

在这里,当用户单击特定行时,我正在努力选择行信息。有动态表ID时,有人可以帮我怎么做吗?

到目前为止,我已经尝试使用以下代码:

 //DataTables aplies style and behavior to <table>
 var table = $("#" + issueTableId).DataTable({
     "scrollY": 315, // inconsistent IE7/other
     "scrollX": true,
     "searching": false,
     "paging": false,
     "info": false
 });

 table.rows().every(function(rowIdx, tableLoop, rowLoop) {
     var row = this.row(rowIdx).node();
     // add contextMenu to each rows onclick
     $(row).click(displayResultslistPopup);
     // add onclick for each rows checkbox
     $(row).find('input:checkbox').click(function(event) {
         event.stopPropagation();
         $('#SAcheckBox').prop('checked', false);
     });
     // use presence of the attachmentImage.png to add jquery click event for td:
     $(row).find('td:has(img)').click(function(event) {
         event.stopPropagation();
         var id = $(this).parent().attr('id');
         issueAttachmentAttachmentLookUp(id);
     });
 });

但是table.rows().every()不适用于我。我的意图是在表行上注册click事件并检索必要的行信息。

1 个答案:

答案 0 :(得分:1)

如果要将函数绑定到行单击,则可以使用jquery的click()函数并传递回调函数。

$tbody.append('<tr />')
    .click(rowClickCallback)
    .children('tr:last')....

function rowClickCallback(e) {
    console.log(e.target); // It returns the TD which user clicked
    console.log(e.target.parentElement); // It returns the TR which user clicked
}