How to get value from specific TD based on a click event
I would like to know how to get the value from based on a click event. I
have the code to get the text value.
document.getElementById(elem).innerText;
where elem is the id of the particular . I would like to assign this to a
particular variable and use it as a string for querying from the database.
But the problem is I cannot get this to be saved onto a variable.
window.hold = document.getElementById(elem).innerText;
I did this to assign it to a variable. But I should assign this to a PHP
variable and that part is giving me an error. Please some one help me.
So basically what I want is:
<td id='1'>one</td>
<td id='2'>two</td>
<td id='3'>three</td>
so if i click on one. I should capture the data inside td and assign it a
variable. Thanks in advance.
<?php
echo "<div id='one'>";
echo "<div align='center' id='title' style='font-size:32px;font-family:
'trebuchet MS', sans-serif;'>Meter Health</div>";
echo "<table class='table' width='100%' cellpadding='0' cellspacing='5'
style='font-size:32px;'>";
$id = 0;
for ($i = 0; $i < 10; $i++) {
$id++;
echo "<tr>";
for ($a = 0; $a < 10; $a++) {
$c = rand(2000, 9000);
$b = rand(10, 100);
if ($b <= 40) {
$color = 'red';
} elseif ($b <= 60) {
$color = 'orange';
} else {
$color = 'green';
}
echo "<td id=$id; title='$b%'; bgcolor='$color';
onmouseover='ChangeColor(this, true);'
onmouseout='ChangeColor(this, false);'
align ='center'
onclick='view(); print($b);'
>$c</td>";
}
echo "</tr>";
}
echo "</table>";
echo "</div>";
?>
PHP will generate the table and I want a function to get the value of a
assigned to a variable as string based on click event.
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--[if lt IE 9]><script language="javascript" type="text/javascript"
src="dist/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript"
src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript"
src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.css" />
<script language="javascript" type="text/javascript"
src="js/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript"
src="js/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript"
src="js/jqplot.pointLabels.min.js"></script>
<script>
function ChangeColor(tableRow, highLight) {
if(highLight) {
tableRow.style.backgroundColor = 'yellow';
} else {
tableRow.style.backgroundColor = defaultStatus;
}
}
$(function () {
$(document).tooltip();
});
function view() {
document.getElementById("one").style.visibility = "visible";
if(document.getElementById("one").style.display == "none") {
document.getElementById("one").style.display = "";
document.getElementById("two").style.display = "none";
} else {
document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "";
$.jqplot.config.enablePlugins = true;
var s1 = [2, 6, 7];
var ticks = ['IP', 'BILLING', 'LOAD SURVEY'];
plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE
7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: {
show: true
}
});
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: ' + seriesIndex + ',
point: ' + pointIndex + ', data: ' + data);
}
);
}
}
</script>
<script>
$(document).ready(function(){
});
</script>
<style>
table td
{
border:1px solid #ccc;
padding:4px;
width: 45px;
height: 45px;
display: inline-block;
overflow: auto;
}
td{
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:75px
}
</style>
</head>
<body>
<?php
echo "<div id='one'>";
echo "<div align='center' id='title'
style='font-size:32px;font-family: 'trebuchet MS',
sans-serif;'>Meter Health</div>";
echo "<table class='table' width='100%' cellpadding='0'
cellspacing='5' style='font-size:32px;'>";
$id=0;
for($i=0;$i<10;$i++)
{ $id++;
echo "<tr>";
for($a=0;$a<10;$a++){
$c=rand(2000,9000);
$b=rand(10,100);
if($b<=40){
$color='red';
}
elseif($b<=60){
$color='orange';
}
else{
$color='green';
}
echo "<td id=$id; title='$b%'; bgcolor='$color';
onmouseover='ChangeColor(this, true);'
onmouseout='ChangeColor(this, false);'
align ='center'
onclick='view(); print($id);'
>$c</td>";
}
echo "</tr>";
}
echo"</table>";
echo "</div>";
?>
<div id='two' style='display:none;'>
<div id="chart1" style="height:400px;width:700px; margin-left:
9em; margin-top: 3em; margin-bottom: 4em; text-align:
center;"></div>
<div><button onclick='view();'>Back</button></div>
</div>
<script>
function print(elem) {
// window.hold=document.getElementById(elem).innerHTML;
window.hold = document.getElementById(elem).innerText;
document.write(window.hold);
console.log(hold);
// console.log(elem);
// document.getElementById("two").innerHTML=elem;
}
</script>
</body>
</html>
No comments:
Post a Comment