文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >显示可点击的网格

问显示可点击的网格
EN

Stack Overflow用户
提问于 2016-01-25 01:55:45
回答 5查看 931关注 0票数 0

显示像下面这样的网格的最佳方式是什么，它允许用户选择多个框，然后让页面捕获所选的元素？

我正在使用的现有代码似乎不够充分，因为它显示了一个只能选择一个按钮的网格：

​

代码语言：javascript
复制
<tr>
<th>6-8 AM</th>
<td><button type="button" class="btn"></button></td>
<td><button type="button" class="btn"></button></td>
<td><button type="button" class="btn"></button></td>
<td><button type="button" class="btn"></button></td> 
<td><button type="button" class="btn"></button></td>     
<td><button type="button" class="btn"></button></td>  
<td><button type="button" class="btn"></button></td>                                   
</tr>

​

​

​

checkbox
javascript
jquery
html
css
EN

回答 5

Stack Overflow用户

发布于 2016-01-25 02:05:18

编写一个函数来捕获onclick，并将其存储在一个元素的数据变量中，然后在用户想要同步时将其发送到服务器

票数 2
EN

Stack Overflow用户

发布于 2016-01-25 02:04:09

您可以使用for循环来实现这一点。首先，您需要声明一些变量

代码语言：javascript
复制
var table = document.getElementsByTagName("table")[0];
var days = ["M", "T", "W", "TH", "F", "S", "SU"];
var times = ["6-8AM", "8-10AM", "10-12PM", "12-1PM", "1-3PM", 
             "3-5PM", "5-7PM", "7-9PM", "9-11PM"];
var headerRow = document.createElement("tr");
table.appendChild(headerRow);
var emptyCell = document.createElement("th");
emptyCell.innerHTML = '';
headerRow.appendChild(emptyCell);

您将首先使用日期的名称创建标题行。最好的方法是遍历我们刚刚创建的days数组。但是，因为数组是零索引的，所以我们必须将索引指定为day - 1。

代码语言：javascript
复制
for (var day = 1; day <= days.length; day++) {
    var th = document.createElement("th");
    th.innerHTML = days[day - 1];
    headerRow.appendChild(th);
}

然后，您希望为可用时隙的数量创建10行。这些行中每一行的第一个孩子将是时隙。

代码语言：javascript
复制
for (var time = 1; time <= times.length; time++) {
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    td.innerHTML = times[time - 1];
    table.appendChild(tr);
    tr.appendChild(td);
}

这是一个n x n表，因此您将使用嵌套的for循环。首先，您将遍历所有时隙，换句话说，遍历所有行。然后，您将迭代所有的日期，换句话说，就是列。

代码语言：javascript
复制
for (var time = 1; time <= times.length; time++) {
    var tr = document.querySelector("tr")[i];
    table.appendChild(tr);
    for (var day = 1; day <= days.length; day++) {
        var td = document.createElement("td");
        td.innerHTML = "<input type='checkbox' />"
        tr.appendChild(td);
    }
}
票数 1
EN

Stack Overflow用户

发布于 2016-01-25 02:19:58

我建议使用类来知道选择了哪些单元格，这也使得样式非常简单和交互。

我建议使用@Suresh Reddy Guntaka推荐的2个嵌套循环以编程方式创建表。

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
  <style>
    td {
      padding: 5%;
    }

    .unselected_cell {
      background-color: #EED;
    }

    .selected_cell {
      background-color: green;
    }
  </style>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <table>
    <tr>
      <th>Time</th>
      <th>M</th>
      <th>T</th>
      <th>W</th>
      <th>Tu</th>
      <th>F</th>
      <th>S</th>
      <th>Su</th>
    </tr>
    <tr>
      <td>6-8AM</td>
      <td id=M_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=T_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=W_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Tu_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=F_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=S_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Su_6-8 class="unselected_cell" onclick="handleCellClick(this);" />
    <tr>
      <td>8-10AM</td>
      <td id=M_8-10 class="unselected_cell" onclick="handleCellClick(this);"/>
      <td id=T_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=W_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Tu_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=F_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=S_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Su_8-10 class="unselected_cell" onclick="handleCellClick(this);" />
    </tr>
    <tr>
      <td>10-12PM</td>
      <td id=M_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=T_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=W_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Tu_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=F_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=S_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Su_10-12 class="unselected_cell" onclick="handleCellClick(this);" />
    </tr>
    <tr>
      <td>12-14PM</td>
      <td id=M_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=T_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=W_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Tu_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=F_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=S_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
      <td id=Su_12-14 class="unselected_cell" onclick="handleCellClick(this);" />
    </tr>
    <tr>
      <td>12-14PMM</td>
    </tr>
    <tr>
      <td>14-16PM</td>
    </tr>
    <tr>
      <td>16-18PM</td>
    </tr>
    <tr>
      <td>18-20PM</td>
    </tr>
    <tr>
      <td>20-22PM</td>
    </tr>
    <tr>
      <td>22-00AM</td>
    </tr>
    <tr>
      <td>00-02AM</td>
    </tr>
    <tr>
      <td>02-04AM</td>
    </tr>
    <tr>
      <td>04-06AM</td>
    </tr>
  </table>

    <button onclick="handleButtonClick()">FINISHED</button>

 <script>
   function handleCellClick(cell) {
     if(cell.className.indexOf("unselected_cell") > -1) {
       cell.className = cell.className.replace("unselected_cell", "selected_cell");
     } else {
       cell.className = cell.className.replace("selected_cell", "unselected_cell");
     }
   }

   function handleButtonClick() {
     $(".selected_cell").each(function(index) {
       console.log($(this).prop('id'));
     });
   }
</script>
</body>
</html>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/34979285

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档