Question

我有一张桌子，每个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'的信息。此外，我能够收听上面的点击事件，但我不确定在哪里存储'id'，以便在点击发生时，事件将查找已点击的“tr”并显示该信息在页面上。 http://jsfiddle.net/tLen4o7L/

请在下面找到我的html表的o / p：

enter image description here

下面是按钮点击的位置以及上面显示的点击信息页面上显示的图像......

enter image description here

这是来源：

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

请告诉我所需的更多详情。任何想法如何实现这一点？感谢

Answer 1

首先你需要修复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 2

DEMO

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

要点击行的index，请使用：

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

要点击行的id，请使用：

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

请注意，您的tr元素没有ID。

Answer 3

在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>

现在你可以看一下＆＃34;这个＆＃34;的数据。您的活动中的元素，并知道您在哪一行。

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

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

3 个答案: