如何获取被点击行的id并使用该id显示该行的信息-Using backbone.js

Question

我有一个 table，每个 tr 里面都有一个按钮。现在，当我单击该按钮时，我想监听单击事件并在页面上显示该 tr 的信息。这是 html:

<table>
    <tbody>
        <tr>
            <td>Date</td>
            <div class="cc-manage"> 
                <a class="button manage-cc">Manage</a>
            </div>
        </tr>
        <tr>
            <td>expiry</td>
            <div class="cc-manage"> 
                <a class="button manage-cc">Manage</a>
            </div>
        </tr>
    </tbody>
</table>

Js:

$('.manage-cc').on("click", function() {
  var clicked = $(this).closest('tr'); //getting the tr clicked
   var manageCC = new manageCCModel([],{ id: id });
   manageCC.fetch({
    url: 'fetch/account/list',
    success: function(managecc){
        var manageCCTemplate = Mustache.render(manageCCTmpl, managecc.attributes.data); 
        $("#account").html(manageCCTemplate);
});

上面我试图获取点击的 tr 的信息，但是在我的例子中，无论我点击哪个 'tr'，它总是显示第一个 'tr' 的信息。此外，我还可以收听上面的点击事件，但我不确定将 'id' 存储在何处，以便在发生点击时，该事件将查找 'tr' 已被点击并将在页面上显示该信息。 http://jsfiddle.net/tLen4o7L/

请在下面找到我的 html table 的 o/p:

下面是点击按钮的地方，上面是点击后显示的信息页面的图片.....

这是来源：

<tr>
 <td>
   <div class="cc-manage">
      <a class="button manage-cc">Manage</a>
    </div>
 </td>
</tr>

如果需要更多详细信息，请告诉我。任何想法如何实现这一目标？谢谢

Answer 1

在 html 中，您可以在任何标签上拥有数据属性。您可以使用它来将数据与这样的元素相关联：

<table>     
<tbody>
   <tr>
     <td> Date </td>
     <td>
       <div class="cc-manage">
         <a class="button manage-cc" data-rowtype="date">Manage</a>
       </div>
     </td>
     </tr>
    <tr>
      <td> expiry </td>
      <td>
        <div class="cc-manage">
          <a class="button manage-cc" data-rowtype="expiry">Manage</a>
        </div>
      </td>
    </tr>
</tbody>
</table>

现在您只需查看事件中 "this" 元素的数据即可知道您在哪一行。

一些文档： https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Answer 2

首先你需要修复 html

 <table>        
      <tbody>
        <tr>
           <td>Expire Date:</td> 
           <td>10 March 2015</td> 
           <td> 
              <div class="cc-manage">
                    <button class="button manage-cc">Manage</button>

              </div>
            </td>
         </tr>
         <tr>
           <td>Card number:</td> 
           <td>1111222233334444</td> 
           <td> 
              <div class="cc-manage">
                    <button class="button manage-cc">Manage</button>                        
              </div>
           </td>
         </tr>
     </tbody>
  </table>

  <div id='account'></div>

使用此 html，您可以执行以下操作：

 $('.manage-cc').on("click", function() {
      var clickedrow = $(this).closest('tr');
      var descriptionCell = clickedrow.firstChild();
      var valueCell = descriptionCell.next();

      $("#account").html(descriptionCell.text() + " : " + valueCell.text() );
  });

这是一个简单的演示：https://jsfiddle.net/tLen4o7L/1/

Answer 3

DEMO

每个包含按钮的 div 都需要在 td 元素内。

要获取所点击行的 index，请使用：

var index = $(this).closest('table').find('tr').index(clicked);

要获取所单击行的 id，请使用：

var id = clicked.prop('id');

请记住，您的 tr 元素没有 ID。

如何获取被点击行的id并使用该id显示该行的信息-Using backbone.js

How to get the id of the clicked row and using that id display that row's information-Using backbone.js

javascript

jquery

backbone.js