在 jQuery 中获取表的上一个或下一个单元格值

get previous or next cell value of table in jquery

本文关键字：下一个 单元格 上一个 jQuery 获取      更新时间：2023-09-26

可能的重复项：
如何在jquery中获取约会时间（从时间，到时间）

见JSFIDDLE

我正在通过拖动时隙单元格来选择时隙。 选择时间段后，我在文本框中输入名称，然后为该时间段分配患者预约。 我必须在数据库中插入患者姓名（abc），开始时间（8：00AM 0）和结束时间（8：00AM 30）。 如何在 jQuery 中获取这三个值。

在我看来，要使时间表看起来很棒并在各种浏览器上提供良好的用户体验，还有很多工作要做。也许您可以使用jQuery完整日历（http://arshaw.com/fullcalendar/）并对其进行自定义以满足您的需求。

下面是在一天中创建时间事件的演示：

http://arshaw.com/js/fullcalendar-1.5.3/demos/selectable.html

通过一些轻微的 html 修改，例如向时间单元格添加类和一些数据属性，您可以利用jQuery.data()并使用类来简化单元格的定位

 <td class="csstablelisttd time" data-hour="9" data-minute="45"> 45 </td>
预订

"时段"后，向其添加一个类，以标识该课程已预订。通过将患者姓名作为数据存储到时间单元格中，您可以执行以下操作：

$('button').click(function() {
    var msg = 'No Bookings',
        $booked = $('.booked');
    if ($booked.length) {
        msg = [];
        $booked.each(function() {          
            var data = $(this).data()
            msg.push(data.hour + ':' + data.minute + ' - ' + data.patient)
        })
        msg = msg.join(''n');
    }
    alert(msg)
})

这是一个非常简单但使用时间单元格上的单击事件的工作版本。您的鼠标选择方法似乎不起作用，单击更加用户友好。这不会完成您的整个应用程序，但应该会给您一些想法。

http://jsfiddle.net/vrW2n/27/

使用新的 HTML5 time 元素（文档）。然后很容易用jQuery获取时间。

这是有关如何获取第一个选定单元格和最后一个选定单元格的完整示例。在用户单击更新按钮后进行选择。

<!doctype html>
<html>
<head>
    <script 
        src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js">
    </script>
    <script 
        src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js">
    </script>
    <script>
        $(function () {
            var start = $("td.csstdhighlight:first > time").attr("datetime");
            var end = $("td.csstdhighlight:last > time").attr("datetime");
        });
    </script>
</head>
<body>
    <table border="1">
        <tr><td class="csstdhighlight">
            <time datetime="2000-01-01 08:00:00">00</time>
        </td></tr>
        <tr><td class="csstdhighlight">
            <time datetime="2000-01-01 08:15:00">15</time>
        </td></tr>
        <tr><td class="csstdhighlight">
            <time datetime="2000-01-01 08:30:00">30</time>
        </td></tr>
        <tr><td><time datetime="2000-01-01 08:45:00">45</time></td></tr>
    </table>
</body>
</html>

请注意，如果要支持 Internet Explorer 8 或更低版本，则需要确保 IE 将新的 HTML5 time 元素视为预期。最简单的选择是包含上面的示例中的 Modernizr 库，或者如果你想要详细信息，可以阅读博客文章如何让 HTML5 在 IE 和 Firefox 2 中工作。

相关文章：