Ayuda con JQuery, Elementos mismo ID

[pbarros]

Si sé que debería usar una sola id para que no tenga problema... pero no sé como hacer esto de otra forma.

Iniciado por Rosencrantz

$('.CD').length... tal vez.

La clase la estoy usando para el estilo gráfico, tamaño, etc., y puedo usarla en otros elementos que no corresponden a este grupo.

La idea es una especie de grilla... y por un tema de funcionalidad, lo mejor es tener las celdas con id único... es la única forma que se me ocurre.

Les envío el código mejor, puede servir de idea y así pueden ayudarme más.

Código del script:

Código HTML:

<script type="text/javascript">
$(function(){
	$("td").focus(function(){
		switch (this.type) {
			case 'TN':
				valor = $(this).attr("value");
				tamano = $(this).css("width");
				if (typeof valor == "undefined") valor = "";
				this.innerHTML = '<input name="Control" id="Control" type="text" value="' + valor + '" style="width: ' + tamano + '" onblur="control_LostFocus(this)" onkeyup="control_KeyPress(this)" />';
				$("#Control").focus();
				$("#Control").focus();
				break;
			case 'CH':
				valor = $(this).attr("value");
				if (valor == "Si")
					valor = "checked"
				else
					valor = "";
				this.innerHTML = '<input name="Control" id="Control" type="checkbox" checked="' + valor + '" onblur="control_LostFocus(this)" onkeyup="control_KeyPress(this)" />';
				$("#Control").focus();
				$("#Control").focus();
				break;
			case 'CB':
				valor = $(this).attr("value");
				texto = '';
				texto += '<select name="Control" id="Control" style="width: ' + tamano + '" onblur="control_LostFocus(this)" onkeyup="control_KeyPress(this)" >';
				if (valor == 0 || valor == "undefined")
					texto += '<option value="0" selected="selected"></option>'
				else
					texto += '<option value="0"></option>';
				if (valor == 1)
					texto += '<option value="1" selected="selected">Funcionando</option>'
				else
					texto += '<option value="1">Funcionando</option>';
				if (valor == 2)
					texto += '<option value="2" selected="selected">Incorrecto</option>'
				else
					texto += '<option value="2">Incorrecto</option>';
				texto += '</select>';
				this.innerHTML = texto;
				$("#Control").focus();
				$("#Control").focus();
				break;
		}
	});
});
function control_LostFocus(e) {
	tipo = $(e).parent().attr("type");
	numero = $(e).parent().attr("number");
	id = $(e).parent().attr("id");
	switch (tipo) {
		case 'TN':
			valor = $(e).val();
			$(e).parent().attr("value", valor);
			$(e).parent().html(valor);
			break;
		case 'CH':
			valor = $(e).attr("checked");
			if (valor == "checked" || valor == "on" || valor == true)
				texto = "Si"
			else
				texto = "";
			$(e).parent().attr("value", valor);
			$(e).parent().html(texto);
			break;
		case 'CB':
			valor = $(e).val();
			texto = $("#" + $(e).attr("name") + " :selected").text();
			$(e).parent().attr("value", valor);
			$(e).parent().html(texto);
			break;
	}
}
function control_KeyPress(e) {
	tipo = $(e).parent().attr("type");
	numero = $(e).parent().attr("number");
	id = $(e).parent().attr("id");
	if (window.event.keyCode==13) {
		if ($("[id=" + id + "]").length > numero) {
			$("[id=" + id + "][number=" + (parseInt(numero) + 1) + "]").focus();
		}
		else {
			$(e).blur();
		}
	}
}
</script> 

Estilo:

Código HTML:

 <style type="text/css">
		* { margin: 0; padding: 0; font: 11px "Arial"; }
		th { background-color: #786654; }
		td { background-color: #CE9D6C; }
		table { cell-spacing: 0.05em; background-color: #000000;}
		.CF { width: 30px; }
		.CD { width: 80px; }
	</style> 

HTML:

Código HTML:

<table>
    <tr>
        <th class="CF">&nbsp;</th>
        <td class="CD" id="rotulo" number="1" type="CH" value=""></td>
        <td class="CD" id="rotulo" number="2" type="TN" value=""></td>
        <td class="CD" id="rotulo" number="3" type="TN" value=""></td>
        <td class="CD" id="rotulo" number="4" type="TN" value=""></td>
        <td class="CD" id="rotulo" number="5" type="CB" value=""></td>
    </tr>
</table>