I have a table as following I need when click on a row cell select this row and convert as a JavaScript object using pure JavaScript.

<table id="auditors">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

I have a table as following I need when click on a row cell select this row and convert as a JavaScript object using pure JavaScript.

<table id="auditors">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

• javascript

Share Improve this question Follow edited Jan 5, 2017 at 13:02 Praveen Kumar Purushothaman 167k2727 gold badges213213 silver badges260260 bronze badges asked Jan 5, 2017 at 13:00 GiorgosGiorgos 67744 gold badges1313 silver badges2727 bronze badges 3

• It can be any cell or any specific cell that is when clicked changes that row to object? – Sorangwala Abbasali Commented Jan 5, 2017 at 13:02
• 1 Please post your code you have so far and have problems with so we can have a look at it and figure out why it is not working. – Nope Commented Jan 5, 2017 at 13:03
• You need to be more specific then click on a row cell select this row and convert as a JavaScript object What type of object? You expect the th values to be property names of the object with the values of the tr you clicked on to be the values? There is a lot of gray area instructions with no visible initial effort being made. – Nope Commented Jan 5, 2017 at 13:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The interesting part here is to make it generic by not hardcoding the keys/columns. This can be done by using the th element texts as keys when building the object:

[].slice.call(document.querySelectorAll("#auditors tr"), 1).forEach(function(row){
      row.addEventListener("click", function(){
           var ths = document.querySelectorAll("#auditors th");
           var obj = [].reduce.call(ths, function(obj, th, i){
               obj[th.textContent] = row.cells[i].textContent;
               return obj;
           }, {});
           console.log(obj);
      });
});

<table id="auditors">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

You can do using addEventListener:

var trs = document.querySelectorAll("tr");
for (var i = 0; i < trs.length; i++)
  (function (e) {
    trs[e].addEventListener("click", function () {
      console.log(this);
    }, false);
  })(i);

<table id="auditors">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Here, the this will be a HTMLElement Object. The logged item will be the <tr> itself.

<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>

If you want it to make it like an Object that contains your format, then you need to do:

var trs = document.querySelectorAll("tr");
for (var i = 0; i < trs.length; i++)
  (function (e) {
    trs[e].addEventListener("click", function () {
      console.log({
        "FirstName": this.querySelectorAll("*")[0].innerHTML.trim(),
        "LastName": this.querySelectorAll("*")[1].innerHTML.trim(),
        "Age": this.querySelectorAll("*")[2].innerHTML.trim()
      });
    }, false);
  })(i);

<table id="auditors">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

When you click the row, you will get the object as:

{
  "FirstName": "Jill",
  "LastName": "Smith",
  "Age": "50"
}

Here I have assumed the <th> as the Object Keys.