[SOLUCIONADO] Paso de variable por click

[asassa]

Hola , tengo un problema con un paso de variable de una tabla a un input.

Código PHP:

  <table id="Text1">
    <thead>
        <tr>
        <th>contenido1</th>
                <th>contenido1</th>
        </tr>
    </thead>
</table> 
   

lo que quiero hacer es que al hacer click en cuanquiera de los <th> de las tablas este contenido se pase a un input con id="Text1". Solo necesito que se pase uno de los valores contenidos, y al hacer click en el siguiente se borre el contenido del inputo y se coloque uno nuevo valor
<input id="Text1" type="text">

[danicasas]

Aquí verás cómo se hace:
http://www.w3schools.com/jsref/event_onclick.asp
http://www.w3schools.com/jsref/prop_html_innerhtml.asp

Ten en cuenta que no puedes tener dos objetos con el mismo id

incorrecto:
<table id="Text1">
<input id="Text1" type="text">

[BlackJohan]

Con tu mismo ejemplo creo que lo siguiente funcionaria:

Código Javascript:

getElementsByTagName("th").forEach(function(element){
    element.addEventListener("click",function(){
        getElementById("Text1").value=element.innerHTML;
    });
});
 

Toma en cuenta o que te dijo danicasas, cambia tus IDs por ejemplo "Tabla1" y "Texto1".

Saludos

[Alexis88]

Iniciado por BlackJohan

Con tu mismo ejemplo creo que lo siguiente funcionaria:

Código Javascript:

getElementsByTagName("th").forEach(function(element){
    element.addEventListener("click",function(){
        getElementById("Text1").value=element.innerHTML;
    });
});
 

No puedes aplicar el método forEach en un conjunto de nodos, al menos no de esa forma, pues es un método de Array. Sin embargo, haciendo pequeños cambios, eso funcionará:

Código Javascript:

[].forEach.call(document.getElementsByTagName("th"), function(element){
    element.addEventListener("click",function(){
        document.getElementById("Text1").value = this.innerHTML;
    });
});
 

Por cierto, los métodos getElementsByTagName y getElementById, no pueden ser ejecutados si no son encadenados a document. No son métodos directos del objeto Window, por lo tanto, necesitan el encadenamiento.

Y si deseas que esto funcione en IE8 y versiones anteriores, deberás implementar el algoritmo que se muestra en este enlace.

Saludos

[asassa]

Hola, muchas gracias .

Ahora tengo otro problema, que espero me puedan ayudar. Utilizando el metodo anterior, de la javascript pero no puedo hacer distinciones. quisiera ver si puedo hacer distinción de dos tablas. esta vez sobre la etiqueta <td></td> y en su defecto su tubiera muchos <td></td>
Alguna idea de por que no se pude realizar el paso de los elementos td al input.
Como pude distinguir entre los <td> de las dos tablas.

Código PHP:

   a

<table class="tabla1" id="tabala1_ella">
            <thead id="thead_ella">
                <tr id="tr_ella">
                    <th id="th_ella">nombre ella</th>
                    <td>ana1</td>
                    <td>ana2</td>
                </tr>
            </thead>
        </table>
        <input class="input1" id="Text1" type="text">
        
<table  class="tabla2" id="tabala2_el">
            <thead id="thead_el">
                <tr id="tr_el">
                    <th id="th_el">nombre ella</th>
                    <td id="td_el">Roberto</td>
                </tr>
            </thead>
        </table>
        <input class="input1" id="Text2" type="text">
    </section>  
<script>
[].forEach.call(document.getElementByTagName("td"), function(element){
    element.addEventListener("click",function(){
        document.getElementById("Text1").value = this.innerHTML;
    });
});
</script> 
  

[Alexis88]

Para que no te compliques más, hazlo así:

Código HTML:

<table class="tabla1" id="tabla1_ella">
    <thead id="thead_ella">
        <tr id="tr_ella">
            <th id="th_ella">nombre ella</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td onclick = "fn('Text1', this.innerText)">ana1</td>
            <td onclick = "fn('Text1', this.innerText)">ana2</td>
        </tr>
    </tbody>
</table>
<input class="input1" id="Text1" type="text" />
        
<table  class="tabla2" id="tabla2_el">
    <thead id="thead_el">
        <tr id="tr_el">
            <th id="th_el">nombre el</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="td_el" onclick = "fn('Text2', this.innerText)">Roberto</td>
        </tr>
    </tbody>
</table>
<input class="input2" id="Text2" type="text" />
 

Y en la función:

Código Javascript:

function fn (id, valor){
    document.getElementById(id).value = valor;
}
 

De esta manera, cada vez que des un clic en alguna de las celdas de los <tbody> de las tablas, ejecutarás la funcion fn, a la cual le pasarás el id de la caja de texto y el valor a asignar. Por cierto, si vas a utilizar el id para identificar a las cajas de texto, celdas, filas y tablas, ya no son necesarias las clases.

Saludos