I'm trying to use jquery selectable on a table in Google Apps Script. I'm trying to be able to select multiple table rows at a time. I had it working, but now it's not. Any help would be appreciated!
I noticed the change when I added the <tbody> element. I tried changing both the <style> and function itself in multiple ways, but I can't seem to get it working as intended. I've looked through the documentation and some other questions like THIS and THIS, but I can't seem to make it work
Below is my entire Index.html file. I did not include the Code.GS file.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#feedback { font-size: 1.4em; }
#table .ui-selecting { background: #FECA40; }
#table .ui-selected { background: #928bff; color: white; }
#table { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#table tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
google.script.run.withSuccessHandler(buildOptionsList)
.getTeamArray();
});
</script>
<script>
function buildOptionsList(array2) {
var table = document.getElementById('table');
var tableBody = document.createElement('tbody');
var tbodyID = tableBody.setAttribute('id','tbody');
array2.forEach(function(rowData) {
var row = document.createElement('tr');
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
document.body.appendChild(table);
}
buildOptionsList(array2);
</script>
<script>
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<script>
//need to edit something to get this working again.
$(function() {
$("#table").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable({filter: 'tr'});
});
</script>
</head>
<body>
<div>TEST</div>
<input id="searchInput" value="Type To Search">
<table id="table">
<tr>
<th>GROUP</th>
<th>CLUB</th>
<th>TEAM</th>
<th>STATE</th>
</tr>
</table>
</body>
</html>
