javascript - 可在表上选择的 JQuery

问题描述

我正在尝试在 Google Apps 脚本中的表上使用可选择的 jquery。我试图能够一次选择多个表行。我有它的工作，但现在它没有。任何帮助，将不胜感激！

<tbody>添加元素时，我注意到了变化。我尝试以多种方式更改<style>and 函数本身，但我似乎无法让它按预期工作。我查看了文档和其他一些问题，例如THIS和THIS，但我似乎无法使其工作

下面是我的整个Index.html文件。我没有包含该Code.GS文件。

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

标签： javascriptjqueryhtmlgoogle-apps-script

javascript - 可在表上选择的 JQuery

问题描述

解决方案

推荐阅读