Question

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

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

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

Answer 1

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

Answer 2

您可以使用for循环执行此操作。首先，您需要声明一些变量

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。

for (var day = 1; day <= days.length; day++) {
    var th = document.createElement("th");
    th.innerHTML = days[day - 1];
    headerRow.appendChild(th);
}

然后，您想为可用的时隙数创建10行。每个行的第一个子节点都是时隙。

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循环。首先，您将遍历所有时间段，换句话说，所有行。然后你会迭代所有的日子，换句话说就是列。

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);
    }
}

Answer 3

我建议使用类来了解选择了哪些单元格，这也使得造型非常直观和互动。

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

all
true
null
null

Prog3a
null
2
Usage: java Prog3a infilename searchword

Prog3b
null
2
Usage: java Prog3b infileName outfileName

Prog3c
null
1
Usage: java Prog3c infileName

Answer 4

如果您仍然感兴趣，这是我更多JQuery驱动的解决方案，您正在尝试做什么。它使用AJAX将计划发送回服务器以进行操作。

          <style>
                th {background-color: silver; 
                    width: 70px;
                }
                .slot {
                    background-color:gray;
                }
                .selslot {
                    background-color: blue !important;
                }
            </style>
            <script type="text/javascript">
                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"];
                $(document).ready(function () {

                    var $table = $("#tblSch");

                    var $headerRow = $("<tr><td></td></tr>");
                    for (i = 0; i < days.length; ++i) {
                        $headerRow.append("<th>" + days[i] + "</th>");
                    }

                    var $head = $("<thead/>");
                    $head.append($headerRow);
                    $table.append($head);
                    $tbody = $("<tbody/>");
                    for (var j = 0; j < times.length; ++j) {
                        var $row = $("<tr><th>" + times[j] + "</th></tr>");
                        for (var k = 0; k < 7; ++k) {
                            $row.append("<td class='slot'></td>")
                        }
                        $tbody.append($row);
                    }
                    $table.append($tbody);
                    $(".slot").click(function (evtObj) {
                        if ($(evtObj.target).hasClass("selslot")) { $(evtObj.target).removeClass("selslot") }
                        else { $(evtObj.target).addClass("selslot") }
                    });

                    $("button").click(function () {
                        var $selected = $(".selslot");
                        var timeSlots = [];
                        $selected.each(function () {
                            var cx = this.cellIndex;
                            var rx = this.parentNode.rowIndex;
                            var item = { day: days[cx - 1], time: times[rx - 1] };
                            timeSlots[timeSlots.length] = item;

                        })
                        saveItemList(timeSlots);

                    })
                })
                function saveItemList(list) {
                    $("#list").html("");
                    for (var i = 0; i < list.length; ++i) {
                        $("#list").append("Day:" + list[i].day + " Time: " + list[i].time + "<br />");
                    }

                    $.ajax({
                        url: "handler.asmx",
                        data: JSON.stringify(list),
                        dataType: 'json',
                        type: 'POST',
                        success: function (data) {
                            // do somethign
                        },
                        error: function (data, status, jqXHR) {
                            // do somthing
                        }
                    });
                }
            </script>
        </head>
        <body>
                <div class="container" style="margin-top:20px;">
                    <table id="tblSch"></table>
                </div>
                <button type="button">Save Schedule</button>
               <div id="list"></div>
        </body>

Answer 5

在我看来，您想要的功能实际上是复选框的功能，它保留了是/否用户选择，可以在表单提交上传递。仅仅因为你需要复选框功能，并不意味着它必须看起来像一个复选框。

Codepen的基本示例：http://codepen.io/anon/pen/RrQELP

＆＃13;

      td {border:1px solid;padding:3px;}
      td input[type="checkbox"] {position:absolute;
        left:-9999px;}
      td label {background-color:#333; padding:8px;display:block;color:#fff;border-radius:3px;font-family:arial;}
      td input:checked + label {background-color:#669900}

＆＃13;

      <table>
        <tr>
          <td>
            <input type="checkbox" id="item1"/>
            <label for="item1">Label</label>
          </td>
          <td>
            <input type="checkbox" id="item2"/>
            <label for="item2">Label</label>
          </td>
          <td>
            <input type="checkbox" id="item3"/>
            <label for="item3">Label</label>
          </td>
          <td>
            <input type="checkbox" id="item4"/>
            <label for="item4">Label</label>
          </td>
          <td>
            <input type="checkbox" id="item5"/>
            <label for="item5">Label</label>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="item6"/>
            <label for="item6">Label</label>
          </td>
          <td>
            <input type="checkbox" id="item7"/>
            <label for="item7">Label</label>
          </td>
          <td>
            <input type="checkbox" id="item8"/>
            <label for="item8">Label</label>
          </td>
          <td>
            <input type="checkbox" id="item9"/>
            <label for="item9">Label</label>
          </td>
          <td>
            <input type="checkbox" id="item10"/>
            <label for="item10">Label</label>
          </td>
        </tr>
      </table>

＆＃13;

你当然可以做一堆JS魔术（并且已经有一些聪明的例子！），但有时从语义元素和创造性样式开始，它会让你更快 - 并且用更少的努力。

显示可点击的网格

5 个答案: