如何使用GET方法从可点击的表格单元格发送信息？

Question

我有可点击的td标签表：

<table class="sala" align="center">
    <tbody>
    <tr>
    <th scope="row">A</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">6</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">7</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">8</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">13</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">14</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">15</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">16</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">17</td>
    </tr>

    <tr>
    <th scope="row">B</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">6</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">7</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">8</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">13</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">14</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">15</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">16</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">17</td>
    </tr>

    <tr>
    <th scope="row">C</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">6</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">7</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">8</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">13</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">14</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">15</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">16</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">17</td>
    </tr>

    <tr>
    <th scope="row">D</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">6</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">7</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">8</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>
    <td colspan="5" rowspan="2" class="entry">WEJŚCIE</td>
    </tr>

    <tr>
    <th scope="row">E</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">6</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">7</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">8</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>

    </tr>

    <tr>
    <th scope="row">F</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="unactive">6</td>
    <td class="unactive">7</td>
    <td class="unactive">8</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>
    <td rowspan="5" class="entry"></td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">14</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">15</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">16</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">17</td>
    </tr>

    <tr>
    <th scope="row">G</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">6</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">7</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">8</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">14</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">15</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">16</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">17</td>
    </tr>

    <tr>
    <th scope="row">H</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">6</td>
    <td class="unactive">7</td>
    <td class="unactive">8</td>
    <td class="unactive">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">14</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">15</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">16</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">17</td>
    </tr>

    <tr>
    <th scope="row">I</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">6</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">7</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">8</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">14</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">15</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">16</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">17</td>
    </tr>

    <tr>
    <th scope="row">J</th>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">1</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">2</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">3</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">4</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">5</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">6</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">7</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">8</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">9</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">10</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">11</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">12</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">14</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">15</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">16</td>
    <td class="noactive" onclick="javascript:$(this).toggleClass('active').toggleClass('noactive');">17</td>
    </tr>
    </tbody>
</table>

看起来像什么（黄色描述选定的单元格）：

我想通过GET方法发送选定的单元格。我知道我的代码中需要一个表单和输入标签，如单选按钮，但如何轻松更改？也许有其他解决方案可以做到这一点？

Answer 1

我无法测试它，因为我没有所有代码，但我想我可以帮助你。首先，我认为你应该生成表格。如果您想稍后编辑，它会对您有所帮助。你可以使用这样的代码来生成它：

<script>
    function createTable() {
        var table = document.createElement("table");
        table.setAttribute("class", "sala");
        table.setAttribute("align", "center");
        var tableBody = document.createElement("tbody");
        var letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
        for (var i = 0; i < 10; i++) {
            tableBody.appendChild(createRow(letters[i]));
        }
        table.appendChild(tableBody);
        return table;
    }

    function createRow(letter) {
        var tableRow = document.createElement("tr");
        var tableHeader = document.createElement("th");
        tableHeader.innerHTML = letter;
        tableHeader.setAttribute("scope", "row");
        tableRow.appendChild(tableHeader);
        for (var i = 1; i <= 17; i++) {
            tableRow.appendChild(createDataCell(i));
        }
        return tableRow;
    }

    function createDataCell(value) {
        var tableDataCell = document.createElement("td");
        tableDataCell.innerHTML = value;
        tableDataCell.setAttribute("class", "noactive");;
        tableDataCell.onclick = function () {
            $(this).toggleClass('active').toggleClass('noactive')
        };
        return tableDataCell;
    }
    document.body.appendChild(createTable()); // Edit this line to add it to what you want
 </script>

使用该代码，您将拥有一张类似于您的表格的表格。但是你想发送这些数据，所以我编辑它以添加隐藏的输入。我认为它会比单选按钮更好：

<script>
    function createTable() {
        var table = document.createElement("table");
        table.setAttribute("class", "sala");
        table.setAttribute("align", "center");
        var tableBody = document.createElement("tbody");
        var letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
        for (var i = 0; i < 10; i++) {
            tableBody.appendChild(createRow(letters[i]));
        }
        table.appendChild(tableBody);
        return table;
    }

    function createRow(letter) {
        var tableRow = document.createElement("tr");
        var tableHeader = document.createElement("th");
        tableHeader.innerHTML = letter;
        tableHeader.setAttribute("scope", "row");
        tableRow.appendChild(tableHeader);
        for (var i = 1; i <= 17; i++) {
            tableRow.appendChild(createDataCell(letter, i));
        }
        return tableRow;
    }

    function createDataCell(letter, value) {
        var tableDataCell = document.createElement("td");
        tableDataCell.innerHTML = value;
        tableDataCell.setAttribute("class", "noactive");
        tableDataCell.onclick = function () {
            $(this).toggleClass('active').toggleClass('noactive')
            var currentValue = $(this).children().val();
            if(currentValue=="noactive"){
                $(this).children().val("active");
            }else{
                $(this).children().val("noactive");
            }
        };
        var input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("value", "noactive");
        input.setAttribute("name", letter+value);
        tableDataCell.appendChild(input);
        return tableDataCell;
    }
    document.body.appendChild(createTable()); // Edit this line to add it to what you want
</script>

现在，您只需要将表元素放在表单中。设置表单方法以获取并添加提交按钮！ ：）

你有一些活跃的字段，我不知道什么是默认值，所以在我的例子中所有都是noactive。但是如果需要，可以添加一个函数来编辑要更改的字段。

另外，隐藏的输入名称是字母+数字。例如：G12或A1或B17

希望这会有所帮助，如果某些事情无法发挥作用，你可以发表评论，我会看到我能不能做些什么！ :)

编辑：我无法在本地完成测试，所以请给我反馈！ :)此外，根据您的需要，最好在服务器端执行此操作。最后，代码在生产使用之前需要一些改进！