2
EDIT ::私は解決策を考案しました。このポストの下を参照jqueryを1 trに制限し、選択した項目を別のページに渡す方法
私はselectableでセットアップしようとしているテーブルがあります。私はjavascript/jqueryコーダーではない（私のコードが示すように）。選択可能な範囲を1テーブル行に制限し、開始セルIDと終了セルIDを別のページに送信しようとしています。私は$ .post経由でデータを送信する方法を知っていますが、適切なデータを取得することや1行に制限することはできません。
私はthis postを見つけましたが、テーブルの列に制限されています。テーブルの行に制限するには、逆に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;
}
EDIT :: だですしかし、それは動作します
$(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
//});
}
});
});
理由だけではなく、jQueryのでこれをしない： '$（ 'UI-選択 '）removeClass（' UI-選択'）; 3. – Twisty
対コードの' 1行さて、あなたは可能性あなたが本当にしたい場合に。しかし物事は進んだ？では、なぜネイティブで行うことができるのかはライブラリに依存するのですか？ +より良いパフォーマンスですか？ https://jsperf.com/jquery-vs-native-element-performance古いブラウザをサポートする必要がない場合は、jQueryのようなものを使用します。 – MonteCristo
その論理はあまり意味がありません。 jQueryが利用できない場合、このUIスクリプティングのNONEはまったく機能しません。個人的には、コードの一貫性を保つためにjQueryにとどまります。これにより、クロスブラウザの互換性も向上します。 – Twisty