jquery選擇當前tr的第二個和第三個單元格

Question

我是新的jquery.Below是我的html表在內容頁面。在母版頁我還有其他表。 當我通過拖動從'tableAppointment'中選擇表格單元格時。 它選擇頁面中的所有表格單元格。 用戶有限制只選擇當前tr的第二個和第三個單元格。如果用戶選擇三行以上，則發出警報（“時隙不超過45分鍾。”）..如何用jquery做到這一點。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Drag selection example</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

        google.load("jquery", "1.3.2");

        google.setOnLoadCallback(function ()
        {
            var active = false;

            $('#tableAppointment tr td:nth-child(2), #tableAppointment tr td:nth-child(3)').mousedown(function (ev)
            {
                active = true;
                $(".csstdhighlight").removeClass("csstdhighlight"); // clear previous selection
                ev.preventDefault(); // this prevents text selection from happening
                $(this).addClass("csstdhighlight");
                $(this).addClass("temp_selected");
            });

            $('#tableAppointment tr td:nth-child(2), #tableAppointment tr td:nth-child(3)').mousemove(function (ev)
            {
                if (active)
                {
                    $(this).addClass("csstdhighlight");
                    $(this).addClass("temp_selected");
                }
                if ($('.temp_selected').length > 6)
                {
                    alert("Time slot not more than 45 minutes.")
                    return false;
                }
            });

            $(document).mouseup(function (ev)
            {
                active = false;
                $('.temp_selected').removeClass('.temp_selected');

            });
        });
    </script>
    <style type="text/css">
        .csstdhighlight
        {
            background-color: #ccffcc;
        }
    </style>
</head>
<body>
    <table id="tableAppointment" cellspacing="1" width="50%" border="1" align="center">
        <tr>
            <td bgcolor="#ffffff">
            </td>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                <b>Patient Name</b>
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd" valign="top" width="70px">
                8:00AM
            </td>
            <td class="csstablelisttd">
                0
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                15
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                30
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                45
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd" valign="top" width="90px">
                9:00AM
            </td>
            <td class="csstablelisttd">
                0
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                15
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                30
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                45
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
    </table>    
</body>
</html>

Answer 1

嘗試使用$('#tableAppointment tr td:nth-child(2)')

alert("time slot not more than 45 minutes.")

<script type="text/javascript">

        google.load("jquery", "1.3.2");

        google.setOnLoadCallback(function ()
        {
            var active = false;


            $("#tableAppointment tr td:nth-child(2), #tableAppointment tr td:nth-child(3)").mousedown(function (ev)
            {
                ev.preventDefault(); // this prevents text selection from happening
                if(get_num_rows() > 3)
                { 
                    alert("time slot not more than 45 minutes");
                    return false; 
                }
                active = true;
                num_rows_selected = num_rows_selected + 1;
                $(".csstdhighlight").removeClass("csstdhighlight"); 
                $(this).addClass("csstdhighlight");
            });

            $("td").mousemove(function (ev)
            {
                if (active)
                {
                    $(this).addClass("csstdhighlight");
                }
            });

            function get_num_rows() {
                var count = 0;
                $("#tableAppointment tr").each(function(){
                    if($(this).find('td.csstdhighlight').length > 0)
                    {
                      count++;
                    }
                });
                return count;
            }

            $(document).mouseup(function (ev)
            {
                active = false;
            });

        });

    </script>

Answer 2

這樣的事怎么樣？

$("td").mousemove(function (ev) {
    if (active){
        $(this).addClass("csstdhighlight");
    }
    if($('.csstdhighlight').length > 2){
        alert("time slot not more than 45 minutes.")
    }
});

因此，如果有超過2個元素包含csstdhighlight類。 然后它會提醒錯誤。

第二次嘗試：

$("#tableAppointment td").mousedown(function (ev)
        {
            active = true;
            $(".csstdhighlight").removeClass("csstdhighlight"); // clear previous selection
            ev.preventDefault(); // this prevents text selection from happening
            $(this).addClass("csstdhighlight");
            $(this).addClass("temp_selected");
        });

        $("td").mousemove(function (ev)
        {
            if (active)
            {
                $(this).addClass("csstdhighlight");
                $(this).addClass("temp_selected");
            }
            if($('.temp_selected').length > 2){
                alert("time slot not more than 45 minutes.")
            }
        });

        $(document).mouseup(function (ev)
        {
            active = false;
            $('.temp_selected').removeClass('temp_selected');
        });

jquery選擇當前tr的第二個和第三個單元格

問題描述

2 個解決方案

解決方案1
2 已采納 2012-06-09 09:49:50

解決方案2
1 2012-06-09 09:57:58

jquery選擇當前tr的第二個和第三個單元格

問題描述

2 個解決方案

解決方案1 2 已采納 2012-06-09 09:49:50

解決方案2 1 2012-06-09 09:57:58

解決方案1
2 已采納 2012-06-09 09:49:50

解決方案2
1 2012-06-09 09:57:58