How to make all td can adjust ajax?

I would like to ask you, now you need to let the second td of each tr in table echo the content at another div when the mouse moves up. I use ajax and mouseover, and then use id to locate the td, code as follows:

$(document).ready(function(){
        $("-sharptdid").mouseover(function () {

            var $val = $.trim($("-sharptdid").text());

            $.ajax({
            type: "post",
                url: "getinfo.php",
                data: {val:$val},

                success: function (data,status) {

                    $("-sharpshowinfo").html(data);
                },

                error: function () {
                    alert("error");
                }

but this is only the first time that td can successfully call ajax, and no other td sends packets, that is, it does not call ajax. (if you look at the source code, you can see that the second td of each tr has id=tdid.) Why? Or is there a better way to realize this need? Thank you so much!

Mar.06,2021

first of all, you need to understand the difference between id and class in CSS. Strictly speaking, the same id has and only one place in HTML (although multiple HTML can not report errors,), class can be reused.
and here you use jQuery's id selector $(- sharpelid) , while the id selector selects only one Element ah. Not ElementList


the first solution: replace id with class, and then use this to get the value of the current element in the mouseover callback function

  

it is not recommended that you do this. The content you display can be uniformly obtained in advance, and then displayed when the hover event of td is triggered

Menu