Ich habe eine dynamische Tabelle erstellt und möchte auf eines der erstellten Objekte in einem Javascript zugreifen. Zum Beispiel: Wie adressiere ich eine dynamisch erstellte Schaltfläche?

<script type="text/javascript">
function myJavaScriptFunction()
{ 
 //How do I know here which button triggered the function?
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction()"/>
   </td>
 </tr>
<% } %>
</table>

Vielen Dank im Voraus / John

1
John 8 Okt. 2012 im 11:49

6 Antworten

Beste Antwort

Ordnen Sie den Parameter als Objekt zu:

function myJavaScriptFunction(object)
{ 
 //How do I know here which button triggered the function?
    var id = object.id;
}

In Ihrem HTML müssen Sie Folgendes tun:

onclick="myJavaScriptFunction(this)"

Dies ist der Punkt, an dem Sie die Funktion aufrufen und das Schlüsselwort this als Argument übergeben.

Das Schlüsselwort this bezieht sich auf das HTML-Element, das aufgerufen wurde. Dies ist die Schaltfläche, auf die Sie geklickt haben. Das Objekt hat das Attribut id, das Sie in der Funktion als object.id definiert haben. Der Wert des Attributs id ist im Grunde das Feld "id" des Eingabe-Tags.

Wenn Sie alles zusammenfügen, erhalten Sie:

<script type="text/javascript">
function myJavaScriptFunction(object) // You're defining the function as having a parameter that it accepts. In this case, it accepts an object.
{ 
   alert(object.id); // Alert the object's id.
   // Do what you want with object.id
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction(this)"/>
   </td>
 </tr>
<% } %>
</table>
1
Stegrex 8 Okt. 2012 im 08:01
<script type="text/javascript">
function myJavaScriptFunction(button)
{ 
   alert($(button).attr('id')); // gets the id of the button that called the function
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction(this)"/>
   </td>
 </tr>
<% } %>
</table>
1
mr_lewjam 8 Okt. 2012 im 07:54

Sie sollten die Schaltflächen-ID kennen:

var button = document.getElementById("button-no-1");
0
Anton Rudeshko 8 Okt. 2012 im 07:53

Sie können Ihren Code wie folgt ändern:

<input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction('<%="button-no-"+i%>')"/>



<script type="text/javascript">
function myJavaScriptFunction(buttonId)
{ 
 //How do I know here which button triggered the function?
}
</script>
0
Zafer 8 Okt. 2012 im 07:52

In Javascript so

var elem = document.getElementById("button-no-1");
0
Justin Harvey 8 Okt. 2012 im 07:52

Übergeben Sie das Tastenelement als Parameter an die Funktion

<script type="text/javascript">
function myJavaScriptFunction(button)
{ 
 //button triggered the function
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction(this)"/>
   </td>
 </tr>
<% } %>
</table>
1
Musa 8 Okt. 2012 im 07:52