如何使 <td> 可点击答案

【问题标题】：How to make <td> clickable如何使 <td> 可点击
【发布时间】：2016-12-16 21:17:26
【问题描述】：

我创建了一个表来在<td> 中显示我的 SPARQL 查询结果，但我希望它在单击<td>（结果）时显示一个消息框。现在额外的<td> 显示在顶部，它只适用于那个特定的。点击实际结果<td>时似乎没有任何反应：

我的代码：

    <table id="results">
    <td class="td" onclick="myFunction()"></td>
    </table>
    <body>
        <script type="text/javascript">
         PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>        
PREFIX type: <http://dbpedia.org/class/yago/>
PREFIX prop: <http://dbpedia.org/property/>
SELECT ?country_name
WHERE {
    ?country rdf:type type:Country108544813.
    ?country rdfs:label ?country_name.

}
                "Limit 1"
                ].join(" ");

                alert("this query: [" + query + "]");

                var queryUrl = url + "?query=" + encodeURIComponent(query) + "&format=json";




</body>

JavaScript 代码我是从在线资料中获得的，所以我仍然在想它，它的主要用途是显示查询结果。所以是的答案非常感谢，感谢阅读:)

【问题讨论】：

你可以添加一个点击事件到你想要激活的td
你可以发布从你的ajax返回的呈现的html

标签： javascript jquery html css asp.net-mvc

【解决方案1】：

所以首先，你的 html 有点不对劲......你的表格在标签之外，而它应该在里面：（注意 td 通常也在 a 中）

<body>
    <table id="results">
        <tr><td class="td" onclick="myFunction()"></td></tr>
    </table>
    <script type="text/javascript">
    ....

但更准确地说是您的问题：您已经创建了 one 单元格，并仅将 onclick 事件处理程序附加到它。您抓取的 JavaScript 代码实际上追加新的行和单元格到表中，并且没有分配 onclick 处理程序。

所以我会尝试这样的事情：

<script type="text/javascript">
        var table = $("#results");
        table.on("click", "td", myFunction); // <-- magic!
        var url = "http://dbpedia.org/sparql";

“神奇”行是甜蜜的部分：它将处理程序附加到整个表上，但通过“td”选择器过滤事件。动态添加 DOM 元素时的理想选择...

然后您不需要设置初始 td，然后在表格顶部设置一个空且可点击的表格...相反，只需在您的页面上放置一个空表格：

<body>
    <table id="results"></table>
    <script type="text/javascript">
    ....

希望这会有所帮助！

【讨论】：

【解决方案2】：

在查看您的代码时，您会发现只有静态的点击事件

<table id="results">
<td class="td" onclick="myFunction()"></td>
</table>

当您添加动态时，没有类或 onclick 事件。您可以通过将 onclick 动态添加到 td 或运行脚本将该表中的所有 td 设置为具有相同的点击事件来解决此问题。

function getTableCell(fieldName, rowData) {
            //var td = $("<td></td>");
              var td = $("<td class="td" onclick="myFunction()"></td>");
            var fieldData = rowData[fieldName];
            //alert("fieldName = ["+fieldName +"] rowData[fieldName][value] = ["+rowData[fieldName]["value"] + "]");
            td.html(fieldData["value"]);
            return td;
        }

或

$("#results td").click(function(){
    var x;
    if (confirm("Press a button!") == true) {
        x = "You pressed OK!";
    } else {
        x = "You pressed Cancel!";
    }
}

【讨论】：

您为什么不直接从静态元素（如#results）委派点击事件处理程序？这样，即使添加了动态元素，也不必每次都重新添加绑定。我认为$("#results").on("click", "td", function() { do some code }); 会这样做，是吗？
你可以，但这不是问题所在。他希望能够单击表格中的任何 td 元素。如果他想点击任何 td 元素，你可以使用：
知道了，是的 - 我更新了我的评论，感谢您的关注！
$("td")，抱歉它不允许我编辑我的其他评论
您要问的是我回答的第二部分。我只是使用 click 事件而不是 on 事件。