0

http://jsfiddle.net/Cyjye/ 私はjqueryを初めて使用します。jsfiddleに表示されるhtmlテーブルを作成しました。最初に、htmlテーブルの2番目の行の2番目のセルから選択を行います。最初の行の2番目のセルから選択します。私は30分以内に患者に時間を割くことができます。ユーザーが30分を超えて選択すると、「タイムスロットは30分以内」というアラートが表示されます。アラートは正しく機能しますが、追加されたcssはアラート後に削除されません。アラートの後にマウスを上げると、.cellがcssで強調表示されます。アラートが生成され、最近セルに追加されたcssが削除され、アラートの後にマウスを押すたびに、cssでセルが強調表示されない場合はそのようにしたくありません。私はたくさん試しましたが、正しい方法が得られませんでした。30分の時間を強調表示し、患者の選択ボタン（htmlテーブルの下に患者の選択（テキストボックスから取得する患者）ボタンがあります）をクリックすると、強調表示のcssが削除されます。

<!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;
            var lastActionWasError = 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
                $(".csstdhighlight").removeClass("csstdhighlight");
                $(".temp_selected").removeClass("temp_selected");
                $(this).addClass("csstdhighlight");
                $(this).addClass("temp_selected");
            });

            $('#tableAppointment tr td:nth-child(2), #tableAppointment tr td:nth-child(3)').mousemove(function (ev)
            {
                if (lastActionWasError)
                {
                    $(".csstdhighlight").removeClass("csstdhighlight");
                    $(".temp_selected").removeClass("temp_selected");
                    lastActionWasError = false;
                }
                if (active)
                {
                    $(this).addClass("csstdhighlight");
                    $(this).addClass("temp_selected");
                }
                if ($('.temp_selected').length > 6)
                {
                    alert("Time slot not more than 45 minutes.");
                    $(this).removeClass("csstdhighlight");
                    $(this).removeClass("temp_selected");
                    lastActionWasError = true;
                    return false;
                }
            });
        });
    </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>
4

1 に答える 1

1

最後に選択したセルからhighlighedcssを削除するには、

$(this).removeClass("csstdhighlight");
$(this).removeClass("temp_selected");

JSFiddle

于 2012-06-11T06:35:49.680 に答える