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

Question

I have a table and every tr has a button inside it. Now when I clicked that button I want to listen to the click event and display that tr's information on the page. here is the 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);
});

Above im trying to fetch the information of the tr clicked, however in my case,no matter which 'tr' i click, it always displays the information of the first 'tr'. Also I'm able to listen to the click event above, but I'm not sure where to store that 'id' so that when the click occurs, the event will look for which 'tr' has been clicked and will display that information on the page. http://jsfiddle.net/tLen4o7L/

Please find below the o/p of my html table:

Below is the place where, the button clicks and above is the image shown of the info page displayed on the click.....

here is the source:

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

Please let me know of needed more details. Any ideas how to achieve this?? Thanks

Answer 1

First you need to fix the 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>

With this html, you can do something like:

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

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

Here is a simple demo : https://jsfiddle.net/tLen4o7L/1/

Answer 2

DEMO

Each of the button-containing divs need to be inside a td element.

To get the index of the row clicked use:

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

To get the id of the row clicked use:

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

Bear in mind that your tr elements do not have ids.

Answer 3

in html you can have a data attribute on any tag. you can use this to associate data with the element like this:

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

now you can just look at the data of the "this" element in your event and know which row you are on.

some documentation: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes