admin管理员组

文章数量:1414614

I have created a table to display my SPARQL query result in the <td>, the result does display however I want it that when the<td> (result) is clicked on it displays a message box. Right now an extra <td> is displayed at the top and it only works for that particular one. Nothing seems to happen when clicking on the actual result <td>:

My code: 

    <table id="results">
    <td class="td" onclick="myFunction()"></td>
    </table>
    <body>
        <script type="text/javascript">
         PREFIX rdfs: <;        
PREFIX type: </>
PREFIX prop: </>
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>

The JavaScript code I got it from an online material so still getting my head around it , the main use of it is to display the query result. So yeah answers are really appreciated and thanks for reading:)

I have created a table to display my SPARQL query result in the <td>, the result does display however I want it that when the<td> (result) is clicked on it displays a message box. Right now an extra <td> is displayed at the top and it only works for that particular one. Nothing seems to happen when clicking on the actual result <td>:

My code: 

    <table id="results">
    <td class="td" onclick="myFunction()"></td>
    </table>
    <body>
        <script type="text/javascript">
         PREFIX rdfs: <http://www.w3/2000/01/rdf-schema#>        
PREFIX type: <http://dbpedia/class/yago/>
PREFIX prop: <http://dbpedia/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>

The JavaScript code I got it from an online material so still getting my head around it , the main use of it is to display the query result. So yeah answers are really appreciated and thanks for reading:)

  • javascript
  • jquery
  • html
  • css
  • asp-mvc
Share Improve this question edited Dec 23, 2016 at 23:34 Ahmed 793 silver badges11 bronze badges asked Dec 16, 2016 at 21:17 Jesse LinJesse Lin 771 gold badge1 silver badge9 bronze badges 2
  • you could add a click event to the td you want to be active – happymacarts Commented Dec 16, 2016 at 21:21
  • can you post the rendered html that is returned from your ajax – happymacarts Commented Dec 16, 2016 at 21:22
Add a ment  | 

2 Answers 2

Reset to default 2

So first off, your html is a little off... Your table is outside the tag, when it should be inside it: (note a td usually would be in a too)

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

But to your question more precisely: you have created one cell, and attached an onclick event handler to it and it only. The javascript code you grabbed actually appends new rows and cells to the table, and those don't have onclick handlers assigned.

So I'd try something like this instead:

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

The "magic" line is the sweet part: it attaches the handler on the whole table, but filter the events by the "td" selector. Ideal when you are adding DOM elements dynamically...

And then you don't need to set your initial td, then one that is empty at the top of your table and clickable... Instead, just place an empty table on your page:

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

Hope this helps!

While looking over your code you seam to only have the click event on the static 

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

When you add the dynamical the is no class or onclick event. You can fix this by either adding the onclick to the td dynamically or running a script that sets all the tds in that table to have the same click event.

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

or

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

本文标签： javascriptHow to make lttdgt clickableStack Overflow

版权声明：本文标题：javascript - How to make &lt;td&gt; clickable - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745166269a2645698.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。