如何根据点击事件从特定TD获得价值

How to get value from specific TD based on a click event

本文关键字：TD 何根 事件      更新时间：2023-09-26

我想知道如何根据点击事件从中获取值。我有获取文本值的代码。

document.getElementById(elem).innerText;

其中elem是特定的id。我想将其分配给一个特定的变量，并将其用作从数据库进行查询的字符串。但问题是，我无法将其保存到变量中。

window.hold = document.getElementById(elem).innerText;

我这样做是为了将它分配给一个变量。但我应该将其分配给一个PHP变量，而这部分给了我一个错误。请有人帮我。

所以基本上我想要的是：

<td id='1'>one</td>
<td id='2'>two</td>
<td id='3'>three</td>

所以如果我点击一个。我应该捕获td内部的数据，并为其分配一个变量。提前谢谢。

<?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将生成该表，我希望有一个函数根据点击事件将赋值给变量的值作为字符串。

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

var hold = document.getElementById(elem).innerText;

创建一个对象，例如：

    GLOBAL = { "variable" : "" }

然后对于点击事件：

    tdClicked = function(){
      GLOBAL.variable = document.getElementByID(elem).innerText;
    }

只需将print($id)更改为print(this)和

function print(elem) {
    var hold = elem.innerText;
    console.log(hold);
}
相关文章：