knockout - Jquery... Saber que fila poner en modo Edicion...

[chcma]

Hola Foreros !!!

Bueno... a ver si puedo explicar bien mi problema y que me puedan ayudar xD.

Tengo una tabla creada dinámicamente a través de Knockout.

Esta tabla, en cada fila tiene dos columnas:

Columna 1:
una label (display: inline)
una caja de texto (display: none)

Columna 2:
boton Editar (display: inline)
boton Cancelar (display: none)

La idea es que al pulsar el botón Editar, SOLO se muestre la caja de texto, y el botón Cancelar correspondiente a la FILA en la que se ha pulsado el botón.

Soy capaz de mostrarlo pero para todos los controles de mi tabla, no solo para la de la fila en cuestión.

¿Saben algún método o técnica, lo más "standar posible" para realizar lo que les digo?

[migue1891]

Muestra el código y almomejor podemos echarte una mano

[diurno10]

Yo lo encararía de esta manera:

jQuery(tabla tr td [botonedit]).click(function){
var _this = jQuery(this);
var _fila = jQuery(_this).parent('td').parent('tr);
jQuery(_fila).prev().find(input[type="text"]).show();
}

Tradusco lo que hice, primero selecciono el tr de la tabla donde estoy parado, es decir el padre del boton, luego tengo que ir a la columna anterior donde se encuentra la caja de texto, por eso utilizo jQuery(_fila).prev() y luego busco una caja de texto con find, ya que se q es una sola y la muestro con show().

PD: entiendo q tu tabla tiene este formato

|---------------|------------------|
|label | boton editar |
|---------------|------------------|
|caja texto | boton cancel |
|---------------|------------------|

Cualquier cosa me avisas.

[chcma]

Código:

<tbody data-bind="foreach: CertificationList">
	<tr>
		<td>
			<lable style='display: inline' type='text' id='lblEdicion' data-bind='text: Name'></label>
			<input style='display: none' type='text' id='txtEdicion' data-bind='text: Name' />
		</td>
		<td>
			<input type='button' id='btnEdicion' value='Editar' />
		</td>
	</tr>
</tbody>

Supongamos que este código anterior genera algo similar a esto

Código:

<table>
	<tr>
		<td>
			<lable style='display: inline' id='lblEdicion'>Un Valor Cualquiera</label>
			<input style='display: none' type='text' id='txtEdicion' value='Un Valor Cualquiera' />
		</td>
		<td>
			<input type='button' id='btnEdicion' value='Editar' />
		</td>
	</tr>
	<tr>
		<td>
			<lable style='display: inline' id='lblEdicion'>Otro Valor</label>
			<input style='display: none' type='text' id='txtEdicion' value='Otro Valor' />
		</td>
		<td>
			<input type='button' id='btnEdicion' value='Editar' />
		</td>
	</tr>
</table>

Bien, la idea entonces es, que dependiendo de que botón Editar se pulse, me cambie los display de los controles para la fila correspondiente a la que se encuentra el botón. Espero haberme explicado mejor ahora. : )

[chcma]

Gracias Diurno, le echaré un ojo.

Realmente mi tabla tendrá más columnas con cajas de texto, solo puse en el POST que tenga una columna para simplificarlo. De todas formas, espero poder estudiar lo que me has puesto, y poder ir sacando dudas.

Nuevamente muchas gracias.