Select Html row and get selected data

534
February 21, 2017, at 2:29 PM

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>
Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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/

Rent Charter Buses Company
READ ALSO
Making responsive multiple divs

Making responsive multiple divs

I have page where I show 4 images - 2 by 2 on each rowI'm trying now to make them responsive when page is open on mobile device but I can't figured it out how to make this

409
document.getElementbyID returns NULL for the DIV with in iFrame

document.getElementbyID returns NULL for the DIV with in iFrame

I have a JSP page which loads a static HTML page using iFrameNow i am trying to change the alignment of one of the DIV (which is there in static HTML page) using the jQuery dynamically

854
css vertical align text middle with overflow hidden

css vertical align text middle with overflow hidden

i'm rendering divs within a loopeach div has a text (could be long- which means overflow: hidden is needed

601
Animate height of div with changing content?

Animate height of div with changing content?

I've got a div with the ID testimonials that has a height of autoIn the div are a number of section's that vary in height

484