文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用GET方法从可点击的表单元格中发送信息？

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

Stack Overflow用户
提问于 2015-03-27 06:37:50
回答 1查看 25关注 0票数 0

我有一个带有可点击td标签的表格：

代码语言：javascript
复制
<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方法发送选定的单元格。我知道在我的代码中我需要一个表单和像单选按钮这样的输入标记，但是如何轻松地更改它呢？也许还有其他的解决方案呢？

html
forms
input
html-table
http-get
EN

回答 1

Stack Overflow用户

发布于 2015-03-27 11:38:15

我不能测试它，因为我没有所有的代码，但我想我可以帮助你。首先，我认为您应该生成表。如果您以后想要编辑它，它将对您有所帮助。您可以使用如下代码来生成它：

代码语言：javascript
复制
<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>

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

代码语言：javascript
复制
<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>

现在，您只需要将table元素放入一个表单中。将表单方法设置为get并添加提交按钮！:)

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

此外，隐藏的输入名称是letter+number。例如: G12、A1或B17

希望这能有所帮助，如果有些东西不能工作，你可以评论，我会看看我是否可以做更多的事情！:)

编辑:我不能在本地完全测试它，所以给我反馈！:)另外，根据你的需要，最好在服务器端做。最后，代码需要在生产使用之前进行一些改进！

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/29290152

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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