如何让所有td都能调ajax？

Question

请问大家，现在需要让table中每个tr的第二个td在鼠标移动上去时在另外的div处回显内容，本人使用了ajax和mouseover,再用id来定位td，代码如下：

$(document).ready(function(){
        $('#tdid').mouseover(function () {

            var $val = $.trim($("#tdid").text());

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

                success: function (data,status) {

                    $('#showinfo').html(data);
                },

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

但是这样只是第一个td能成功调ajax，其他td都不发数据包了，即没有调ajax（查看源码看可以看到每个tr的第二个td都有id=tdid），这是为什么？或者要实现本人这个需要，有更好的方法吗？感激不尽！！！

Answer 1

第一种解决方法：把id换成class，然后在mouseover回调函数中用this获取当前元素的值

$('.class').mouseover(function () {
    var val = this.text();            // 这里的this就是当前元素
})

第二种方法可以使用事件委托，我就不上代码了，想要弄懂原理可以去查

Answer 2

首先第一点，你要理解CSS中id和class的区别，严格来说同一个id在HTML中有且仅有一处(虽然多个HTML也不会报错)，class则可以复用多个。
而这里你是使用了jQuery的id选择器$(#elid)，id选择器只选则一个Element啊……不是ElementList

Answer 3

不建议你这样做，你显示的内容可以提前统一获取，然后在触发td的hover事件时将其显示出来