Wie zu machen <td> anklickbar

Ich habe eine Tabelle erstellt, um meine SPARQL Abfrage Ergebnis in der <td> anzuzeigen, das Ergebnis zeigt jedoch, dass ich will, dass wenn die <td> (Ergebnis) angeklickt ist, zeigt es ein Meldungsfeld. Im Moment wird ein extra <td> oben angezeigt und es funktioniert nur für diesen bestimmten. Nichts scheint zu passieren, wenn auf dem tatsächlichen Ergebnis klicken <td>:Wie zu machen <td> anklickbar

Mein Code:

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

Der JavaScript-Code, den ich es von einem Online-Material bekam so noch meinen Kopf Weg daran vorbei, die hauptsächliche Verwendung ist um das Abfrageergebnis anzuzeigen. Also ja Antworten sind wirklich zu schätzen und danke für das Lesen :)

Quelle

2016-12-16 Jesse Lin

Sie könnten ein Klickereignis zu der td hinzufügen, die Sie aktiv sein möchten – happymacarts

können Sie das gerenderte HTML, das von Ihrem Ajax zurückgegeben wird – happymacarts

Also zunächst einmal, ist Ihre HTML ein wenig aus ... Ihr Tisch außerhalb des Tages ist, wenn es in es sein sollte: (eine td beachten Sie in der Regel wäre in ein zu)

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

Aber um Ihre Frage genauer gesagt: Sie haben eine Zelle erstellt und angebracht, um einen Onclick-Ereignishandler, um es und es nur. Der JavaScript-Code, den Sie tatsächlich gegriffen haben hängt neue Zeilen und Zellen an die Tabelle an, und diese haben keine onclick-Handler zugewiesen.

Also würde ich versuchen, so etwas wie diese stattdessen:

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

Die „Magie“ Linie ist der süße Teil: die Handler auf dem ganzen Tisch legt, sondern filtere, um die Ereignisse von der „td "Wahlschalter. Ideal, wenn Sie DOM-Elemente dynamisch hinzufügen ...

Und dann müssen Sie nicht Ihre erste td, dann eine, die oben an Ihrem Tisch leer ist und anklickbar ... Stattdessen platzieren Sie einfach eine leere Tabelle auf Ihrer Seite:

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

Hoffe, das hilft!

Quelle

2016-12-16 21:28:06 MacPrawn

Danke für die Antwort, es hat perfekt funktioniert :) –

Während über Ihren Code suchen Sie nur das Click-Ereignis Naht auf der statischen

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

Wenn Sie die dynamische die Add keine Klasse oder Onclick Veranstaltung. Sie können das beheben, indem Sie den onclick entweder dynamisch zum td hinzufügen oder ein Skript ausführen, das alle tds in dieser Tabelle so einstellt, dass sie dasselbe click-Ereignis haben.

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

oder

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

Quelle

2016-12-16 21:25:29 Wesley

Warum würden Sie nicht einfach den Click-Ereignishandler von einem statischen Element wie '# delegieren Ergebnisse? Wenn Sie dynamische Elemente hinzufügen, müssen Sie die Bindungen nicht jedes Mal neu hinzufügen. Ich denke '$ (" # results "). On (" click "," td ", function() {tu etwas code});' würde es tun, yeah? –

Sie könnten aber das war nicht die Frage gestellt. Er wollte in der Lage sein, auf irgendein Td-Element in der Tabelle zu klicken. Wenn er auf ein beliebiges TD-Element klicken wollte, könntest du folgendes verwenden: – Wesley

Gotcha, yeah - Ich habe meinen Kommentar aktualisiert, danke für den Fang! –

Wie zu machen <td> anklickbar

Antwort

Verwandte Themen