如何限制jquery的可选选项为1 tr，并将选择的项目传递到另一个页面
How to limit jquery selectable to 1 tr and pass selected items to another page
我想到了一个解决方案。见文章底部
我有一个表，我试图得到设置与可选的。我不是一个javascript/jquery程序员通过任何手段(我的代码将显示)。我试图将可选范围限制为1表行，然后将起始单元格id和结束单元格id发送到另一个页面。我知道如何通过$发送数据。post，但我不能得到正确的数据或限制它为1行。
我确实找到了这篇文章，但它限制了表列，我对JS的了解不够，无法将其逆转为限制表行。
这是一个JSFiddle，它不起作用(因此我在这里)，下面是我的代码。这是HTML
<div id="reservation-sheet" style="display: block;">
<table>
<thead>
<tr>
<th>Size</th>
<th>8:00</th>
<th>8:30</th>
<th>9:00</th>
<th>9:30</th>
<th>10:00</th>
<th>10:30</th>
<th>11:00</th>
<th>11:30</th>
<th>12:00</th>
<th>12:30</th>
<th>1:00</th>
<th>1:30</th>
<th>2:00</th>
<th>2:30</th>
<th>3:00</th>
<th>3:30</th>
<th>4:00</th>
<th>4:30</th>
<th>5:00</th>
<th>5:30</th>
<th>6:00</th>
</tr>
</thead>
<tbody>
<tr id="0">
<td id="0-size" class="size">20'</td>
<td id="0-8.00" class="open"> </td>
<td id="0-8.50" class="open"> </td>
<td id="0-9.00" class="open"> </td>
<td id="0-9.50" class="open"> </td>
<td id="0-10.00" class="open"> </td>
<td id="0-10.50" class="open"> </td>
<td id="0-11.00" class="open"> </td>
<td id="0-11.50" class="open"> </td>
<td id="0-12.00" class="open"> </td>
<td id="0-12.50" class="open"> </td>
<td id="0-13.00" class="open"> </td>
<td id="0-13.50" class="open"> </td>
<td id="0-14.00" class="open"> </td>
<td id="0-14.50" class="open"> </td>
<td id="0-15.00" class="open"> </td>
<td id="0-15.50" class="open"> </td>
<td id="0-16.00" class="open"> </td>
<td id="0-16.50" class="open"> </td>
<td id="0-17.00" class="open"> </td>
<td id="0-17.50" class="open"> </td>
<td id="0-18.00" class="open"> </td>
</tr>
<tr id="1">
<td id="1-size" class="size">20'</td>
<td id="1-8.00" class="open"> </td>
<td id="1-8.50" class="open"> </td>
<td id="1-9.00" class="open"> </td>
<td id="1-9.50" class="open"> </td>
<td id="1-10.00" class="open"> </td>
<td id="1-10.50" class="open"> </td>
<td id="1-11.00" class="open"> </td>
<td id="1-11.50" class="open"> </td>
<td id="1-12.00" class="open"> </td>
<td id="1-12.50" class="open"> </td>
<td id="1-13.00" class="open"> </td>
<td id="1-13.50" class="open"> </td>
<td id="1-14.00" class="open"> </td>
<td id="1-14.50" class="open"> </td>
<td id="1-15.00" class="open"> </td>
<td id="1-15.50" class="open"> </td>
<td id="1-16.00" class="open"> </td>
<td id="1-16.50" class="open"> </td>
<td id="1-17.00" class="open"> </td>
<td id="1-17.50" class="open"> </td>
<td id="1-18.00" class="open"> </td>
</tr>
<tr id="2">
<td id="2-size" class="size">20'</td>
<td id="2-8.00" class="open"> </td>
<td id="2-8.50" class="open"> </td>
<td id="2-9.00" class="open"> </td>
<td id="2-9.50" class="open"> </td>
<td id="2-10.00" class="open"> </td>
<td id="2-10.50" class="open"> </td>
<td id="2-11.00" class="open"> </td>
<td id="2-11.50" class="open"> </td>
<td id="2-12.00" class="open"> </td>
<td id="2-12.50" class="open"> </td>
<td id="2-13.00" class="open"> </td>
<td id="2-13.50" class="open"> </td>
<td id="2-14.00" class="open"> </td>
<td id="2-14.50" class="open"> </td>
<td id="2-15.00" class="open"> </td>
<td id="2-15.50" class="open"> </td>
<td id="2-16.00" class="open"> </td>
<td id="2-16.50" class="open"> </td>
<td id="2-17.00" class="open"> </td>
<td id="2-17.50" class="open"> </td>
<td id="2-18.00" class="open"> </td>
</tr>
<tr id="3">
<td id="3-size" class="size">20'</td>
<td id="3-8.00" class="open"> </td>
<td id="3-8.50" class="open"> </td>
<td id="3-9.00" class="open"> </td>
<td id="3-9.50" class="open"> </td>
<td id="3-10.00" class="open"> </td>
<td id="3-10.50" class="open"> </td>
<td id="3-11.00" class="open"> </td>
<td id="3-11.50" class="open"> </td>
<td id="3-12.00" class="open"> </td>
<td id="3-12.50" class="open"> </td>
<td id="3-13.00" class="open"> </td>
<td id="3-13.50" class="open"> </td>
<td id="3-14.00" class="open"> </td>
<td id="3-14.50" class="open"> </td>
<td id="3-15.00" class="open"> </td>
<td id="3-15.50" class="open"> </td>
<td id="3-16.00" class="open"> </td>
<td id="3-16.50" class="open"> </td>
<td id="3-17.00" class="open"> </td>
<td id="3-17.50" class="open"> </td>
<td id="3-18.00" class="open"> </td>
</tr>
</tbody>
</table>
</div>
这是JS
$(document).ready(function() {
var startingRow = 0;
var startingTime = 0;
$('#reservation-sheet').selectable({
filter: 'tr, td', //lets filter to tr and td
start: function(event, ui) {
var startingItem = $('.ui-selecting', this);
startingRow = startingItem.prop('id'); //should be the ID of the starting row
startingTime = startingItem.last().prop('id'); //should be the id of the starting cell
},
selecting: function(event, ui) {
var selectingItems = $('.ui-selecting', this);
//during the selecting process lets make sure we limit to 1 row
if (selectingItems.prop('id') != startingRow) {
selectingItems.not(':first').removeClass('ui-selecting');
}
},
stop: function(event, ui) {
var selectedItems = $('.ui-selected', this);
var endTime = selectedItems.last().prop('id'); //in theory this should be the last selcted cell
//$.post('contact.php', {sTime: startingTime, eTime: endTime, id: startingRow}, function(data, status) {
//pop-up window to get name, email and phone number
//then submit everything
//});
}
});
});
这是CSS
table {
width: 100%;
}
th,
td {
border: 2px solid #000;
text-align: center;
}
tr {
background-color: #CCC;
}
#reservation-sheet td.ui-selecting {
background-color: #FECA40;
}
#reservation-sheet td.ui-selected {
background-color: #F39814;
}
编辑::我想出了一个解决办法。也许不是最漂亮的，但它可以工作
$(document).ready(function() {
$('#reservation-sheet').selectable({
filter: 'tr, td', //lets filter to tr and td
selecting: function(event, ui) {
var selectingItems = $('.ui-selecting', this);
var startingRow = selectingItems.first().prop('id'); //starting row id
var splitCell = selectingItems.last().prop('id').split('-'); //since we have the row id in the cell id, we can use that to find changes
if(splitCell[0] != startingRow) {
selectingItems.not(':first').removeClass('ui-selecting'); //remove extra row to keep it at 1
}
},
stop: function(event, ui) {
var selectedItems = $('.ui-selected', this);
var startTime = selectedItems[Object.keys(selectedItems)[1]];
var startTime2 = startTime['id']; //get our starting cell
var endTime = selectedItems.last().prop('id'); //get our last cell
console.log('send to php: startingTime: '+ startTime2 +' endingTime: '+ endTime);
//$.post('contact.php', {sTime: startingTime, eTime: endTime}, function(data, status) {
//pop-up window to get name, email and phone number
//then submit everything
//});
}
});
});
你可以使用纯javascript在'start'事件中删除选中的类。
start: function( event, ui ){
var el = document.querySelector('.ui-selected');
if(el) {
el.classList.remove('ui-selected')
}
}
如果需要支持旧的浏览器用户删除jquery类
jsfiddle: https://jsfiddle.net/1p30q2hp/
这是我想到的解决方案。正如我在OP中所说，这可能不是最漂亮的方法，但它是有效的。把它贴出来，也许能帮助到别人。
$(document).ready(function() {
$('#reservation-sheet').selectable({
filter: 'tr, td', //lets filter to tr and td
selecting: function(event, ui) {
var selectingItems = $('.ui-selecting', this);
var startingRow = selectingItems.first().prop('id'); //starting row id
var splitCell = selectingItems.last().prop('id').split('-'); //since we have the row id in the cell id, we can use that to find changes
if(splitCell[0] != startingRow) {
selectingItems.not(':first').removeClass('ui-selecting'); //remove extra row to keep it at 1
}
},
stop: function(event, ui) {
var selectedItems = $('.ui-selected', this);
var startTime = selectedItems[Object.keys(selectedItems)[1]];
var startTime2 = startTime['id']; //get our starting cell
var endTime = selectedItems.last().prop('id'); //get our last cell
console.log('send to php: startingTime: '+ startTime2 +' endingTime: '+ endTime);
//$.post('contact.php', {sTime: startingTime, eTime: endTime}, function(data, status) {
//pop-up window to get name, email and phone number
//then submit everything
//});
}
});
});
相关文章：
- 使用JavaScript或jQuery检查单选按钮选择是否与数组中的项目匹配
- jqueryui的轻量级替代品，可在angular项目中选择
- 更新:仅根据单选按钮和所选选项选择特定项目
- 如何在页面加载后禁用下拉列表框项目的选择
- 从Document调用onchange函数.已准备好从更新中预先选择的项目
- 选择了多个用javascript单击的项目
- HTML选择，在DOM中选择了正确的选项，但在firefox中显示了错误的项目
- 取消选择滚动启动时的所有列表视图项目
- 使用.slice分页选择了太多项目
- 在此项目中使用jQuery或JavaScript中的选择器
- 如何检测项目是否在谷歌地图API自动完成列表中选择
- 使用vb限制asp.net中列表框中的项目选择
- SproutCore以编程方式在菜单栏中启动项目选择
- 在项目选择时，JSP中的动态文本字段与来自MYSQL数据库的数据
- 自动完成-自定义renderItem/Menu和项目选择问题
- Jquery iframe项目选择器不工作
- 我应该如何创建一个项目列表，过滤下拉项目选择在引导
- 使用KnockoutJS的项目选择MVC视图
- 想要根据项目选择和项目大小选择创建行和列，想要动态创建如下HTML表
- 无限滚动:项目选择器中的js代码
