Jquery traversing table and replace its contents

Question

I have this table and I have to traverse using Jquery:

<table id="answer">
<thead>
  <tr class="grdheader">
    <td><input type="checkbox" style="border:0px"id="a1chkAll"></td>
    <td>Free Text</td>
    <td>Weighting</td>
  </tr>
</thead>
<tbody>
  <tr id="tdata">
    <td><input type="checkbox" value="440" id="achk" checked="checked"></td>
    <td>ABC</td>
    <td>2</td>
  </tr>
  <tr id="tdata">
    <td><input type="checkbox" value="440" id="achk" checked="checked"></td>
    <td>PQR</td>
    <td>4</td>
  </tr>
  <tr id="tdata">
    <td><input type="checkbox" value="440" id="achk"></td>
    <td>LMN</td>
    <td>6</td>
  </tr>
</tbody>

Get Array like this for it respective Checkbox is checked.

Array(
'<tr id="tdata">
    <td><input type="checkbox" value="440" id="achk"></td>
    <td><input type="textbox" value="ABC"></td>
    <td><input type="textbox" value="2"></td>
  </tr>',
'<tr id="tdata">
    <td><input type="checkbox" value="440" id="achk"></td>
    <td><input type="textbox" value="PQR"></td>
    <td><input type="textbox" value="4"></td>
  </tr>'
)

to start : id must be unique, input type="textbox" doesnt exists. — RafH, May 02 '13 at 08:31
@RafH no its not problem i am using checkbox change event so its not problem — Deval Shah, May 02 '13 at 08:34

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

You can use jQuery .find and .child functions, you can also check a possible similar question here, may also help.

edited May 23 '17 at 11:57

Community

1
1

answered May 02 '13 at 08:34

segFault

3,887
1
19
31

Perhaps you can mess around with this make shift traverse [here](http://jsfiddle.net/kJg3N/) As @RafH previously stated I would change your id's to classes for these table elements as you repeat them throughout the snippet. – segFault May 02 '13 at 09:00
but tp replace `PQR`,`ABC` to `input` box.. and i have update it with console. it works fine [link](http://jsfiddle.net/kJg3N/2/) – Deval Shah May 02 '13 at 09:21
Hii @sebastian `input` tag not come here – Deval Shah May 02 '13 at 10:07

jasse · Answer 2 · 2013-05-03T05:01:23.067

1

Here is a solution or you can check here at jsfiddle

$(function () {

var pids = Array();                               
$('#answer tbody').find('input[type="checkbox"]:checked').closest('tr').map(function(){
    var trindex = $(this).index();
    var trhtml = $('#answer tbody tr')[trindex].outerHTML;
    pids.push(trhtml);
});

});

edited May 03 '13 at 05:01

answered May 03 '13 at 04:55

jasse

101
3

Jquery traversing table and replace its contents

2 Answers2