Select Html row and get selected data

Question

I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!

 <table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
    <tr id="1"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
       <td>1</td>
       <td>2</td>
       <td>3</td>
    </tr>
    <tr id="2"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
    <tr id="3"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
       <td>7</td>
       <td>8</td>
       <td>9</td>
    </tr>
 </table>

And my javascript codes

<script type="text/javascript">
   function ChangeColor(tableRow, highLight) {
      if (highLight) {
         tableRow.style.backgroundColor = '#dcfac9';
      } else {
         tableRow.style.backgroundColor = 'white';
      }
   }
</script>

you do not have readvalues function in javascript and which element in particular you want? for that row or all the elements? — Ankit, Feb 21 '17 at 07:29

score 0 · Accepted Answer · answered Feb 21 '17 at 07:42

You can select all td of selected row and get the innerHTML of each td.

function ChangeColor(tableRow, highLight)
{
if (highLight)
{
  tableRow.style.backgroundColor = '#dcfac9';


}
else
{
  tableRow.style.backgroundColor = 'white';
}
}
function readvalues(tableRow){
var columns=tableRow.querySelectorAll("td");
for(var i=0;i<columns.length;i++)
console.log('Column '+i+': '+columns[i].innerHTML );
}

 <table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
 <tr id="1"onmouseover="ChangeColor(this, true);" 
          onmouseout="ChangeColor(this, false);" 
          onclick="readvalues(this);">
 <td>1</td>
 <td>2</td>
 <td>3</td>
 </tr>
 <tr id="2"onmouseover="ChangeColor(this, true);" 
          onmouseout="ChangeColor(this, false);" 
          onclick="readvalues(this);">
 <td>4</td>
 <td>5</td>
 <td>6</td>
 </tr>
 <tr id="3"onmouseover="ChangeColor(this, true);" 
          onmouseout="ChangeColor(this, false);" 
          onclick="readvalues(this);">
 <td>7</td>
 <td>8</td>
 <td>9</td>
 </tr>
 </table>

Thank you very much It is working and Sorry for the late reply — Rookie, Feb 28 '17 at 13:42
Good to hear that.Can you accept answer as it will others also — Ankit Chaudhary, Feb 28 '17 at 13:46

score 0 · Answer 2 · answered Feb 21 '17 at 07:45

You can do the same thing with pure CSS.

Below is an example, where I have used hover class for true

tr{
  background: grey;
}
tr:hover{
  background: white;
}
.hover:hover{
  background:#dcfac9;
}

<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
 <tr id="1" class="hover"
          onclick="readvalues();">
 <td>1</td>
 <td>2</td>
 <td>3</td>
 </tr>
 <tr id="2" 
          onclick="readvalues();">
 <td>4</td>
 <td>5</td>
 <td>6</td>
 </tr>
 <tr id="3" class="hover"
          onclick="readvalues();">
 <td>7</td>
 <td>8</td>
 <td>9</td>
 </tr>
 </table>

score 0 · Answer 3 · answered Feb 21 '17 at 07:46

If you are using jQuery, you can try something like this. Even more, you can use css instead of changing row colour in javascript.

$('#example tr').click(function() {
    var values = $(this).find('td').map(function() {
        return $(this).text();
    }).get();
    
    console.log(values);
});

table tr:hover {
  background-color: #dcfac9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="example" width="100%" border="1" cellpadding="0" cellspacing="0">
 <tr id="1">
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 
 <tr id="2">
   <td>4</td>
   <td>5</td>
   <td>6</td>
 </tr>
 <tr id="3">
   <td>7</td>
   <td>8</td>
   <td>9</td>
 </tr>
</table>

Thank you very much It is working and Sorry for the late reply — Rookie, Feb 28 '17 at 13:41

score 0 · Answer 4 · answered Feb 21 '17 at 07:54

In case if you want to read current 'tr' or row element's data on click, you can try this using pure javascript:

<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>4</td>
   <td>5</td>
   <td>6</td>
 </tr>
 <tr>
   <td>7</td>
   <td>8</td>
   <td>9</td>
 </tr>
 </table>


<script language="javascript">
function readValues(evt){
    var elem = evt.target.parentElement;
  console.log(elem);    //elem contains current tr element's data
}

var elem = document.querySelectorAll("#example tr");

for(var i=0;i<elem.length;i++){
    bindMe(elem[i]);
}

function bindMe(elem){
    elem.addEventListener("click", function(evt){ 
    readValues(evt);
    });
}
</script>

jsfiddle: https://jsfiddle.net/rxvjmvzh/

Select Html row and get selected data

4 Answers4

Linked