jquery - Meteor app with DataTables: how to capture the value of selected table row -


in meteor app have following table, wrapped in data table):

<template name="introductionwizard_step_2">    <div class="container">         <div class="row">             <div class="col-md-6">                 <div class="panel panel-primary">                     <div class="panel-heading">                         <h3 class="panel-title">introduction wizard step 2: </h3>                         <h3>select application describe</h3>                     </div>                     <table class="table table-hover table-bordered" id="apptable">                         <thead>                             <tr>                             <th>app id</th>                                 <th>app name</th>                                 <th>in scope</th>                                 <th>app owner</th>                                 <th>bu</th>                             </tr>                         </thead>                          <tbody>                             {{#each applist}}                                 {{>approw}}                             {{/each}}                         </tbody>                     </table>                     <br />                  </div>                 <br/>             </div>         </div>     </div> </template>  <template name="approw">      <tr>      <td>{{appid}} </td>         <td>{{appname}} </td>         <td>{{inscope}} </td>         <td>{{appowner}}</td>         <td>{{bu}}</td>      </tr> </template>  

here handler datatable:

template.introductionwizard_step_2.rendered = function(){   console.log('wizard.js: introductionwizard_step_2 rendered');    /* init table */     otable = $('#apptable').datatable( );  $("#apptable tbody tr").on('click',function(event) {     $("#apptable tbody tr").removeclass('row_selected');         $(this).addclass('row_selected');   });   } 

my question is: how capture value of selected/clicked table row?

first, might want use meteor's own template helpers rather jquery event handler. either way, within click event handler event.target object should refer tr clicked.

so need update approw template such each tr tag has id or data-someidentifierofyourchoosing attribute holds _id or other identifier you're trying track row. within handler, $(event.target).prop('id') or $(event.target).data('someidentifierofyourchoosing') should retrieve it.

edit here's example (untested):

<template name="approw">   <tr data-mongoid="{{_id}}">     <td>{{appid}}</td>     <td>{{appname}}</td>     <td>{{inscope}}</td>     <td>{{appowner}}</td>     <td>{{bu}}</td>   </tr> </template> 

and:

template.approw.events({   "click tr": function (event) {     var therowthatwasclicked = event.target;     var mongoidofthatrow = $(event.target).data("mongoid");     // whatever want values; update database, etc.      // copying/updating code comment completeness:     var apos = otable.fngetposition(event.target);     var adata = otable.fngetdata(apos[0]);     var value = fngetselected( otable ).appname;     console.log(adata);     $("#apptable tbody tr").removeclass('row_selected');     $(event.target).addclass('row_selected');   }); 

see live html templates section of meteor docs.


Comments

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

javascript - jQuery show full size image on click -