2012-06-23 3 views
-1

가능한 중복 테이블의 이전 또는 다음 셀 값을 얻을 :
How i get appointment time (From time,To time) in jqueryJQuery와에

see jsfiddle

내가 타임 슬롯 셀을 드래그하여 타임 슬롯을 선택하고 있습니다. 시간 슬롯을 선택한 후 텍스트 상자에 이름을 입력하면 환자 약속이 해당 시간 슬롯에 할당됩니다. 나는 (abc)와 같은 환자 이름을 삽입해야하고 (8:00 AM 0) 시작 시간 (8:00 AM 30)은 데이터베이스에 삽입해야합니다. jquery에서 어떻게이 세 가지 값을 얻을 수 있습니까?

+0

가는 당신에게 몇 가지 아이디어를 제공해야합니다. 당신은 어떤 가치관을 얻는 법을 물었고, 당신이하지 못했던 선택 코드가 무시 될 때 불평을했고, 사람들은 당신이 물어 본 질문에 대한 해결책을 당신에게 주려고했습니다. 이것은 시간과 노력이 당신을 도우려고 노력했다! – charlietfl

답변

-1

새로운 HTML5time 요소 (documentation)를 사용하십시오. 그런 다음 jQuery으로 시간을 가져 오는 것이 쉽습니다.

다음은 첫 번째 선택한 셀과 마지막으로 선택한 셀을 가져 오는 방법에 대한 전체 예제입니다. 사용자가 업데이트 버튼을 클릭 한 후에 선택합니다. 인터넷 익스플로러 8을 지원하거나 아래하려는 경우에 가정으로 IE가 새로운 HTML5 time 요소를 취급 있는지 확인해야한다는

<!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> 

참고. 가장 쉬운 방법은 위의 예제와 같이 Modernizr library을 포함하거나 세부 정보가 필요하면 블로그 게시물 How to get HTML5 working in IE and Firefox 2을 읽을 수 있습니다.

+2

그가 dosnt를 사용합니다. 5 –

+0

그 이유는 무엇입니까? 하나의 JavaScript JavaScript 해킹을 사용하거나 [Modernizr library] (http://modernizr.com/)를 포함하여 모든 브라우저에서 작동합니다. – knut

+0

u는 내가 텍스트 상자에 몇 가지 이름을 입력 오전 8시 0 다음 \t 30에서 시간을 끌어 업데이트 버튼을 클릭하면 내 quetion 내 바이올린에서 볼 수 didnt는 \t \t \t 다음 텍스트 상자 값 때문에 alloted 시간 슬롯 내 quetion로 이동 어떻게 더 jquery 변수에 그 값을 얻을 수 있습니다. –

0

시간표를 멋지게 만들고 다양한 브라우저에서 좋은 사용자 환경을 제공하기 위해서는 많은 노력이 필요합니다. 아마도 jQuery 전체 일정 (http://arshaw.com/fullcalendar/)을 사용하고 필요에 맞게 사용자 지정할 수 있습니다. 여기

은 하루에 시간 이벤트를 만들기위한 데모입니다 : 같은 시간 세포와 일부 데이터 속성에 클래스를 추가하는 등 약간의 HTML 수정으로

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

+0

당신이 나의 시간을 8:00 AM에서 30까지 그 때 \t 나 유형 입력란에 업데이트 버튼을 클릭하십시오. \t \t \t \t 텍스트 상자 값이 alloted 시간 슬롯으로 바뀌므로 내 질문에 따라 jquery 변수에서 그 값을 어떻게 얻을 수 있습니까? –

+0

미안하지만, 현재 상황에서 HTML을 변경하거나 셀의 값을 파싱하지 않고 시간을 선택하고 비교하여 시간 간격을 추출하는 것은 쉬운 해결책이 아니라고 생각합니다. 그래서 지금 가지고있는 문제와 향후 문제를 해결할 수있는 전문 위젯을 사용할 것을 제안했습니다. –

-1

, 당신을 활용할 수 있습니다 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) 
}) 

여기에 시간 셀을 클릭 이벤트를 사용하여 simplifed 많은,하지만 작업 버전입니다. 마우스 선택 방법이 제대로 작동하지 않고 클릭이 사용자에게 친숙합니다. 이는 전체 응용 프로그램을 완료되지 않습니다,하지만 당신은 당신의 질문에 자세한해야 앞으로

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

+0

charlietfl soln은 괜찮지 만 시간 슬롯은 두 개 이상의 셀을 드래그하여 선택해야합니다. –

+0

jQuery UI를 선택할 수 있습니다. 여전히 동일한 코드를 거의 사용할 수 있습니다. 모든 클래스에 동일한 클래스를 추가하면됩니다. 당신이 가진 것은 작동하지 않았고 당신의 질문은 가치를 얻는 방법이었습니다. 당신은이 단순한 모형에서 원하는 것을 할 수있는 html을 갖는 방법을 가졌습니다 – charlietfl

+0

현재 jquery 코드는 사용 가능하지 않습니다 –

관련 문제