Tengo una tabla HTML. En la mesa tengo un cuadro de texto de entrada. Junto a él. (adjunto en el HTML) Tengo un ancla. Todo lo que quiero que haga el ancla (por el momento) es obtener y establecer el valor en el cuadro de texto.
Aquí está mi código HTML (código abreviado):
<tr> <td class="t-Report-cell" headers="DEPARTMENT"> <input type="text" name="f02" size="20" maxlength="2000" value="" col_name="DEPARTMENT" class="u-TF-item u-TF-item--text" autocomplete="off" /> <td class="t-Report-cell" headers="DESCRIPTION"> <input type="text" name="f03" size="20" maxlength="2000" value="soup" col_name="DESCRIPTION" class="u-TF-item u-TF-item--text" autocomplete="off"> <a href="javascript:get_desc( $(this).closest('tr') );" class="a-Button a-Button--popupLOV"> <span class="a-Icon icon-popup-lov"> <span class="visuallyhidden">List</span> </span> </a> <input type="hidden" id="fcs_0001" name="fcs" value="FB0D0992B787C5475D897B224F1FAE9D7547BC497FADE2E32B252FFAE2F31CE235225E0D645509C8E3576895FB814229B832CBF0BC11DA3F784FDE9BD5ADED86" autocomplete="off"> <input type="hidden" id="fcud_0001" name="fcud" value="U" autocomplete="off" /> </tr>Tenga en cuenta que tengo un tipo de entrada = nombre de texto = f03 con un valor de "sopa" (también le he dado otro atributo para tratar de apuntarlo. (col_name = "DESCRIPCIÓN")
Luego, debajo, tengo un ancla que llama a una función de JavaScript y pasa a la fila actual.
Mi función simple hace lo siguiente:
function get_desc(thisRow) { console.log(thisRow); var desc = thisRow.find("input[name='f03']"); console.log(desc); console.log(desc.val()); console.log(desc.text()); }Entonces pasa en la fila actual, busca la entrada y luego intenta obtener el valor.
Puedo ver en console.log que se encuentra el selector correcto, pero nada de lo que hago obtiene el valor.
Como digo, tengo mucho código JavaScript en mi aplicación, así que he estado mirando esto preguntándome qué estoy haciendo mal.
Usé querySelector en lugar de buscar y valorar la propiedad de entrada.
function get_desc(thisRow) { console.log(thisRow); var desc = thisRow.querySelector("input[name='f03']"); console.log(desc.value); } <table> <tr onclick="get_desc(this);"> <td class="t-Report-cell" headers="DEPARTMENT"> <input type="text" name="f02" size="20" maxlength="2000" value="" col_name="DEPARTMENT" class="u-TF-item u-TF-item--text" autocomplete="off" /> <td class="t-Report-cell" headers="DESCRIPTION"> <input type="text" name="f03" size="20" maxlength="2000" value="soup" col_name="DESCRIPTION" class="u-TF-item u-TF-item--text" autocomplete="off"> <a href="#" class="a-Button a-Button--popupLOV"> <span class="a-Icon icon-popup-lov"> <span class="visuallyhidden">List</span> </span> </a> <input type="hidden" id="fcs_0001" name="fcs" value="FB0D0992B787C5475D897B224F1FAE9D7547BC497FADE2E32B252FFAE2F31CE235225E0D645509C8E3576895FB814229B832CBF0BC11DA3F784FDE9BD5ADED86" autocomplete="off"> <input type="hidden" id="fcud_0001" name="fcud" value="U" autocomplete="off" /> </tr> </table>Algunas depuraciones muestran que this es el objeto de la window cuando usa <a href="javascript:get_desc(this);" , :
function get_desc(link) { console.log(link === window); } <a href="javascript:get_desc(this);">click me</a> Si debe usar atributos html, puede usar onclick='get_desc(this) :
function get_desc(link) { thisRow = $(link).closest('tr') var desc = thisRow.find("input[name='f03']"); console.log(desc.val()); } <table> <tr> <td> <input type="text" name="f03" value="soup"> <a href="javascript:return false;" onclick="get_desc(this);">click me</a> </td> </tr> </table>Alternativamente, adopte eventos jquery (o eventos vainilla)
$(".link").click(function() { thisRow = $(this).closest('tr') var desc = thisRow.find("input[name='f03']"); console.log(desc.val()); }); <table> <tr> <td> <input type="text" name="f03" value="soup"> <a href="javascript:return false;" class='link'>click me</a> </td> </tr> </table>en lugar de href use el atributo onClick de ancla.
Prueba esto;
<a href="#" onClick="javascript:get_desc( $(this).closest('tr') );" class="a-Button a-Button--popupLOV">