如何使用Jquery滑动切换表格行?

2024-01-10

我想知道如何从脚本中滑动切换表格行。

我有一个 php 文件,该文件包含在名为“output-listings”的 div 内的 html 页面中。

PHP 文件:

<?php
function outputListingsTable()
{
    $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');
    $result = $mysql->query("SELECT * FROM explore") or die($mysql->error);

    if($result) 
    {
        echo "<div class=\"main-info\"> \n";
            echo "<table class=\"listings\"> \n";
                echo "<tbody> \n";

                    while($row = $result->fetch_object()) 
                    {
                        $id = $row->id;
                        $siteName = $row->site_name;
                        $siteDescription = $row->site_description;
                        $siteURL = $row->site_url;
                        $sitePrice = $row->site_price;


                        echo "  <tr id=\"more-info-" .$id. "\" class=\"mi-" .$id. "\"> \n";
                                echo "  <td> \n";
                                echo "      <div id=\"more-" .$id. "\" class=\"more-information\"></div> \n";
                                echo "  </td> \n";
                        echo "  </tr> \n";

                        echo "  <tr id=\"main-info-" .$id. "\"> \n";
                        echo "      <td>" . $siteName . "</td> \n";
                        echo "      <td>" . $siteURL . "</td> \n";
                        echo "      <td><a id=\"link-" . $id . "\" class=\"more-info-link\" href=\"#\">More info</a></td> \n";  
                        echo "  </tr> \n";
                    }
        echo "</tbody> \n";
    echo "</table> \n";
echo "</div> \n";           

    }

}

?>

正如您所看到的,上面的脚本创建了动态 id 和类,这让我对如何使用 Jquery 选择它们感到困惑。

这是我到目前为止所拥有的jquery,但遗憾的是它不起作用。

$(function() {

$("a.more-info-link").click(function() {

$("#more-info-" + this.id).load("getinfo.php").slideToggle("slow");

return false;

});

});

任何帮助都会很棒。


不是以行为目标,而是将内容嵌套在行内的 div 中,并将动画应用到该 div。

<html>
    <head>
        <title>SandBox</title>       
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div id="divMoreInfo">
                        some text or whatever goes here.
                    </div>
                </td>
            </tr>
            <tr id="main-info-">
                <td>
                    <a id="link" href="#">More info</a>
                </td>
            </tr>
        </table>
    </body>
</html> 
<script src="js/jquery.js" type="text/jscript" ></script>
<script type="text/javascript">
    $("#link").click(function() {
        $("#divMoreInfo").slideToggle(200);
    });
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用Jquery滑动切换表格行? 的相关文章

  • 当用户输入/删除时,使文本字段中的提示消失/重新出现[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有谁知道我怎样才能在我的搜索栏中做出
  • 扩展html表格突出显示行和列并使当前单元格具有不同的颜色

    我找到了用鼠标悬停时突出显示行和列的示例 https stackoverflow com a 28312853 139698 https stackoverflow com a 28312853 139698 如何使鼠标悬停的一个单元格变为
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • 使用 jquery 添加和删除点击时的 div

    我有一个空的 div 其中有另一个可拖动的 div 现在 无论我在哪里单击容器 可拖动 div 都应附加到 0 0 位置 当单击关闭按钮时 我需要删除该可拖动 div 我该怎么做 这就是我所拥有的 http jsfiddle net g6c
  • 使用 jQuery 的 ASP.NET 中的模态表单

    我对 ASP NET 开发还比较陌生 到目前为止 我已经设法让事情变得简单 但我现在的需求有点复杂 到目前为止还没有得到太多乐趣 本质上我希望在单击按钮添加新用户时弹出一个模式表单 所以我发现这个在 jQuery 网站上 http jque
  • 如何在只读字段上启用 jquery 验证?

    伙计们来自http jqueryvalidation org http jqueryvalidation org 刚刚发布版本 1 13 1 检查他们的网站 我在更新日志中看到了这一点 核 忽略只读字段和禁用字段 9f4ba10 这是链接
  • 当用户在 DIV 外部单击时,使用 jQuery 隐藏 DIV

    我正在使用这段代码 body click function form wrapper hide form wrapper click function event event stopPropagation 和这个HTML div clas
  • Emberjs不会加载jquery/javascript,在页面中插入html时运行代码

    Help 我正在开发一个丰富的 emberjs yeoman 项目 该项目使用多个 hbs 模板 这些模板都可以从一个 application hbs 的侧边栏路由到 问题是当我加载页面时 有时使侧边栏折叠的 Jquery 不起作用 而同一
  • 10秒后显示div,10秒后隐藏

    我需要在页面加载后 10 秒内显示一个 div 例如 mybox 使其再保持可见 10 秒 然后以漂亮的滑入 滑出效果隐藏 非常感谢您的任何提示 帮助 请使用以下功能 cycle function cycle myid delay 1000
  • innerHTML 中的 href [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我试图在innerHTML 中创建href 但出现错误或无法正常工作 我想从API制作一个数据 可以点击它而不是复制并将其放入浏览
  • 如何在kendo ui中取消选择网格记录

    我正在选择数据绑定事件的列表视图记录 我在数据绑定中编写了以下代码 var grid grid data kendoGrid grid select grid tbody find gt tr first 现在我想动态取消选择网格 我怎样才
  • 通过向导方法使用内置 ASP.NET MVC 验证

    我正在使用JQuery Steps 插件基本表单示例 http www jquery steps com Examples basic form为了我的巫师 在此示例中 您会注意到他们使用的是 JQuery Validate 插件 该插件与
  • 将字符串转换为整数数组 String at = "1 2 3 4 5" 转换为 ar=[1,2,3,4,5]

    我正在读取一个字符串 作为一整行数字 用空格分隔 即1 2 3 4 5 我想将它们转换为整数数组 以便我可以操作它们 但这段代码不起作用 它说不兼容的类型 String str br readLine int array new int 4
  • socket.io - ReferenceError:套接字未定义

    我正在尝试编写一个简单的应用程序 它将我在文本区域中输入的每个字符镜像到 div 使用socket io 但我不断收到以下客户端错误 ReferenceError 套接字未定义 这是我的服务器代码 var express require e
  • 隐藏行时更新奇数/偶数行颜色

    我在一页上有几个表格和一个复选框 用于根据其中一个单元格的内容显示 隐藏行 虽然所有行都是可见的 但一切都很完美 并且行颜色根据需要交替 当我隐藏行时 交替的行颜色不再正确 显然 如何轻松更新类以在选中复选框时保持交替行颜色 然后在取消选中
  • 渲染后更改 Fullcalendar 事件源

    我一直在使用 FullCalendar v1 5 3 来替代 MS SharePoint 我正在尝试重新渲染日历事件的源 例如 当页面默认加载时 这是 ajax 调用 日历 事件 feedTasks start 1338094800 end
  • 我可以检测焦点来源吗? (Javascript、jQuery)

    快速提问 是否可以检测焦点是来自鼠标单击还是来自焦点事件的选项卡 我想如果没有 我将不得不在同一元素上使用单击句柄来确定源 但我更喜欢通过焦点事件的方式 Thanks Gausie 可能无法 100 工作 但如果没有直接的方法 那么你不能直
  • 如何在延迟加载期间在图像占位符顶部显示“正在加载”gif 图像

    我正在使用这个 jQuery 插件来延迟加载我的图像 惰性加载器 http www appelsiini net projects lazyload 它运行良好 我只想在所有尚未加载的图像之上显示一个 正在加载 图像 可能是 gif 当图像
  • VBA按空格分割字符串

    我想要一个 Excel 函数 我可以调用该函数并将单元格传递到其中 输入 Firstname Lastname email protected cdn cgi l email protection Firstname midname Las
  • 如何检查输入元素是否隐藏?

    如何检查输入元素是否被隐藏 隐藏为type hidden myInputElement attr type hidden 隐藏为display none myInputElement is hidden

随机推荐