CODEWITHSUNDEEP
jquery
Tanwer
Tanwer

Reputation: 1583

Converting a Table Row to array [ By Row ID ]

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 ?

Upvotes: 0

Views: 313

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

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>

Upvotes: 2

Related Questions