Converting a Table Row to array [ By Row ID ]

Question

Below is my HTML Table Row

I am trying to get it into an array where td have set contenteditable="true"

<tr id="row1" role="row" class="odd">
<td id="edit1" class="sorting_1"> 
<a id="editbtn_1" disabled=""><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true" style="color:green"></i></a>
</td>
<td>1</td>
<td contenteditable="true">15310</td>
<td contenteditable="true">Abhishek Upadhyay</td>
<td id="dp1" contenteditable="true">01-09-2017</td>
<td id="dp1" contenteditable="true">30-10-2017</td>
<td contenteditable="true">Haryana</td>
<td contenteditable="true">Mairwa</td>
<td>31-10-2017</td>
</tr>

I got below code from a Stack Overflow Post to get it done as below

var id = this.id;
var recordId = id.replace("editbtn_", "").trim();
var row = $(this).parents().parents().attr('id');
row = '#tbl_Schedule_Update ' + row;
var contents = $(row).find('td[contenteditable=true]');
var contentArray = [];
for (i = 0; i < contents.length; i++) {
    contentArray[i] = contents[i].innerHTML;
}

Till getting row id everything is fine , in row variable I am getting row1.

But in below line I am expecting an array ,

var contents = $(row).find('td[contenteditable=true]');

But its coming as undefined and no error in console log .

How can I get it done into array ?

@madalinivascu I checked in chrome debugger , its the right row and #tbl_Schedule_Update is table id so it will be '#tbl_Schedule_Update row1' — Tanwer
– Tanwer, Commented Nov 2, 2017 at 5:56

madalinivascu · Accepted Answer · 2017-11-02 06:01:32Z

2

Use the following:

$('#editbtn_1').click(function() {

  var id = this.id;
  var recordId = id.replace("editbtn_", "").trim();
  var contents = $(this).closest('tr').find('td[contenteditable=true]');//get all contenteditable from that row
  var contentArray = [];

  $.each(contents,function(i,v){  //loop each one
     contentArray.push($(v).text());//push the values to the array
  });
  console.log(contentArray)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="row1" role="row" class="odd">
  <td id="edit1" class="sorting_1">
    <a id="editbtn_1" disabled=""><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true" style="color:green"></i>edit</a>
  </td>
  <td>1</td>
  <td contenteditable="true">15310</td>
  <td contenteditable="true">Abhishek Upadhyay</td>
  <td id="dp1" contenteditable="true">01-09-2017</td>
  <td id="dp1" contenteditable="true">30-10-2017</td>
  <td contenteditable="true">Haryana</td>
  <td contenteditable="true">Mairwa</td>
  <td>31-10-2017</td>
</tr>
</tbody></table>

answered Nov 2, 2017 at 6:01

madalinivascu

32.4k4 gold badges42 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tanwer Over a year ago

Atta boy , now that's smart . No need to get row id . Just by using closet() it is giving everything . Thanks

madalinivascu Over a year ago

yes you select the items relative to the parent tr

Collectives™ on Stack Overflow

Converting a Table Row to array [ By Row ID ]

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related