Loop through html table and display one td column using jquery -

having small issues in html table - need display (which display:none initially) on click of button using jquery.

in view

<table id="tbllayout" style ="width:100%"  cellpadding="0" cellspacing="0" >             <thead>                 <tr>                     <th style="width:200px"></th>                     <th style="width:100px">col1</th>                     <th style="width:100px">col2</th>                     <th style="width:500px">col3</th>                     <th style="width:100px">col4</th>                     <th style="width:100px">col5</th>                     <th style="width:1200px">col6</th>                                             <td></td>                 </tr>             </thead>              <tbody> 

@{          foreach (s.libs.saapp in @model._salist)         {            if (blockno != @app.blockno && var_i == 0)             {             </td></tr>                  blockno = @app.blockno;                 endrow = @app.count+ 1;                 <th rowspan ="@endrow">s<br />t<br />a<br />l<br />l<br />s <br /><br /> @app.stallno <br />to <br />@app.end_row</th>             }                      <tr>                                            <td  align="center">@app.col1</td>                                            <td  align="center"  >@app.col2</td>                              <td>@app.col3</td>                             <td  align="center" >@app.col4</td>                             <td  align="center" >@app.col5</td>                             <td>@app.col6</td>                                                                                                     <td id="chk_edit"> <input type ="checkbox" style="display:none"/> </td>                             <td>                              <input id="hdnid1" value="@app.id1" type="hidden"/>                             <input id="hdnid2" value="@app.id2" type="hidden"/>                             <input id="hdnid3" value="@app.id3" type="hidden"/>                             </td>                     </tr>                                                              }       }          

there button

 <a href="#" class="abut" id="btnedit"><span class="abut-edit">&nbsp;</span>edit</a>  

in javascript - need enable (or make visible) column 7 in html

<td id="chk_edit"> 

not sure how this. , td columns checked. how achieve this? appreciated. in advance

you can listen click on link, seventh td , show hidden input.

$(function(){    $("#btnedit").click(function(e){       e.preventdefault();       $("#tbllayout tr").each(function(a,b)  //loop through each tr's      {              //find 7th td , find checkbox inside , show             $(b).find("td").eq(6).find("input[type='checkbox']").show();                            });           });  }); 

here working sample.

a better solution update html markup include css class checkboxes can use our jquery selector , avoid looping did above. associate unique row id/record value checkbox, not need keep in seperate hidden field. can store in html5 data attribute on checkboxes.

also, should not have duplicate id's elements. remove loop.

so new markup like

<td>@app.col6</td>                                                                         <td>      <input type ="checkbox" class="editchk" data-rowid="@app.id1" style="display:none"/>  </td> 

now our new css class selector, showing checkboxes easy.

$("#btnedit").click(function(e){      e.preventdefault();      $("input.editchk").show();         }); 

and ids(we stored in data attribute) of rows selected checkboxes be

$("#savebtn").click(function(e){     e.preventdefault();        var checkeditems= $("input.editchk:checked");       checkeditems.each(function(a,b){          var rowid=$(this).data("rowid");          alert(rowid);       });        // or use jquery map , array of ids       var idarray = checkeditems.map(function(){         return $(this).data("rowid");       }).get();        console.log(idarray); }); 

here working sample of that.