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 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>
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>
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>
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/
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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
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
i'm rendering divs within a loopeach div has a text (could be long- which means overflow: hidden is needed
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