打开一个表单后点击更多的单元格表(jquery/php)
Open a form after clicking more cell table (jquery/php)
我有一个日历表的页面,我已经使用这个脚本来改变bgcolor (css类。clicked)值的一个或多个td标签。
$(document).mousedown(function() {
$("td#target").bind('mouseover',function(){
$(this).toggleClass('clicked');
});
})
.mouseup(function() {
$("td#target").unbind('mouseover');
});
$("td#target").mousedown(function() {
$(this).toggleClass('clicked');
});
现在我需要在mouseup上打开一个弹出式表单,但我不能这样做。你能帮我吗?
的例子:我正在选择5月15日至20日的单元格,单击鼠标将打开一个弹出框,其中包含"编译这些字段为天15-16-17-18-19-20"
谢谢
你可以让div的位置固定或绝对,他们将覆盖底层内容。叠加的div(弹出)将是一个普通的div,您可以在其中创建表单和任何您想要的。下面是我拼凑的一个快速示例:http://jsfiddle.net/0zvqm5nr/35/
下面是jsfiddle的代码:
HTML <div class="calendar">
Your calendar would be here and for every entry you can generate a div 'calendar-entry' as shown in the html
<div class="calendar-entry">
<button id="popupButton" class="calendar-entry-button">15.05.2015</button>
<div class="popup">
<h2>15.05.2015</h2>
Activity:
<form action="somesite.php" method="post">
<select id="activity">
<option class="placeholder" selected disabled>Select</option>
<option>work</option>
<option>youth leave</option>
</select>
<input type="submit" value="save">
</form>
</div>
</div>
<div class="calendar-entry">
<button id="popupButton" class="calendar-entry-button">16.05.2015</button>
<div class="popup">
<h2>16.05.2015</h2>
Activity:
<form action="somesite.php" method="post">
<select id="activity">
<option class="placeholder" selected disabled>Select</option>
<option>work</option>
<option>youth leave</option>
</select>
<input type="submit" value="save">
</form>
</div>
</div>
and so on...
CSS
.calendar {
width: 500px;
height: 500px;
background: green;
}
.popup {
width: 500px;
height: 500px;
background: grey;
display: none;
position: fixed;
top: 0;
left: 0;
}
Javascript var buttons = document.getElementsByClassName("calendar-entry-button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
this.parentNode.getElementsByClassName("popup")[0].style.display = "block";
}
}
希望这对你有帮助。
相关文章:
- 使用jquery在单击时在单元格中输入值
- 如何将jQuery/AAJAX结果放入表格单元格
- 使用jQuery只返回选中复选框后的第一个表单元格值
- jQuery-通过AJAX调用动态添加具有值的表单元格
- jQuery如何获取td单元格值
- 在jQuery中输出单击单元格的内容
- jQuery根据相关复选框选择求和单元格
- jQuery表 - 如何根据选中的复选框在单元格中写入文本
- 嵌套的 Jquery 每个 2D 数组错误地重复表单元格
- JQuery insertAfter();移动下一个表格单元格
- 使用jquery数据表,我可以't在不破坏FixedHead的情况下生成单元格colspan=3
- 如何使用jquery获取表单元格中子元素的值
- JQuery:如何在单元格中选择表的行,而不是表的行
- jQuery - 如果 img 在单元格内
- 存在事件的单元格的jQuery DatePicker背景色(加载时)
- jQuery从html单元格中读取值
- 如果鼠标悬停得很快,Jquery鼠标移动会错过一些单元格
- 如何让jQuery.change()引用Handontable上的单元格
- 用JQuery在廉价的excel表格上标记最后一个单元格
- 集& lt; h2>文本基于表格单元格- jQuery