Foros del Web » Programando para Internet » Jquery »

Bloquear Filas y Columnas en Común

Estas en el tema de Bloquear Filas y Columnas en Común en el foro de Jquery en Foros del Web. Buenas tardes foristas, Tengo el siguiente código: Código: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="//d3js.org/d3.v3.min.js"></script> <title>Inicio</title> <style> ...
  #1 (permalink)  
Antiguo 16/06/2016, 10:31
Avatar de edrc5  
Fecha de Ingreso: marzo-2016
Mensajes: 16
Antigüedad: 6 años, 1 mes
Puntos: 0
Bloquear Filas y Columnas en Común

Buenas tardes foristas,

Tengo el siguiente código:
Código:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="//d3js.org/d3.v3.min.js"></script>
	<title>Inicio</title>
	<style>
div#my-container input{padding:5px;font-size:12px !important;width:100px;margin:2px}
table#my-table{border-collapse:collapse;width:0%}
table#my-table td{width:50px;height:27px;border:1px solid #D3D3D3;text-align:center;padding:0;}
.append_row{color:black !important;background-color:#FFD6D6 !important;border:1px #ccc solid !important;}
.append_column{color:black !important;background-color:#D6FFD6 !important;border:1px #ccc solid !important;}
.delete{color:black !important;background-color:#eee !important;border:1px #ccc solid !important;}
.col{background-color:#D6FFD6 !important}
.row{background-color:#FFD6D6 !important}
</style>
<script type="text/javascript">
// Agregar Fila a la Tabla
function appendRow() {
    var tbl = document.getElementById('my-table'), // Referenciar Tabla
        row = tbl.insertRow(tbl.rows.length),      // Anexar Fila a la Tabla
        i;
    // Insertar Celdas a la Nueva Fila
    for (i = 0; i < tbl.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), i, 'row');
    }
}
// Crear Elemento DIV y Agregarlo a la Celda de la Tabla
function createCell(cell, text, style) {
    var div = document.createElement('input'), // Crear Elemento DIV, lo cambie por input
        txt = document.createTextNode(text); // Crear Nodo de Texto
    div.appendChild(txt);                    // Anexar Nodo de Texto al DIV
    div.setAttribute('class', style);        // Establecer Atributos de Clase al DIV
    div.setAttribute('className', style);    // Establecer Atributos de Clase al DIV para IE
    cell.appendChild(div);                   // Anexar DIV a la Celda de la Tabla
}
// Agregar Columna a la Tabla
function appendColumn() {
    var tbl = document.getElementById('my-table'), // Referenciar Tabla
        i;
    // Abrir Bucle para cada Fila y Anexar Celda
    for (i = 0; i < tbl.rows.length; i++) {
        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
    }
}
// Borrar Filas de la Tabla con un Índice Mayor que 0
function deleteRows() {
    var tbl = document.getElementById('my-table'), // Referenciar Tabla
        lastRow = tbl.rows.length - 1,             // Establecer el Último Índice de la Fila
        i;
    // Eliminar Filas con un Índice Mayor que 0 
    for (i = lastRow; i > 0; i--) {
        tbl.deleteRow(i);
    }
}
// Borrar Columnas de la Tabla con un Índice Mayor que 0
function deleteColumns() {
    var tbl = document.getElementById('my-table'), // Referenciar Tabla
        lastCol = tbl.rows[0].cells.length - 1,   // Establecer el Último Índice de la Columna
        i, j;
    // Eliminar Celdas con un Índice Mayor que 0 (Para Cada Fila) 
    for (i = 0; i < tbl.rows.length; i++) {
        for (j = lastCol; j > 0; j--) {
            tbl.rows[i].deleteCell(j);
        }
    }
}
</script>
</head>
<div id="my-container">
<center><br />
<input type="button" value="Crear Tabla" onclick="javascript:appendRow();appendColumn()" class="append_row append_column"/><br />
<input type="button" value="Borrar Tabla" onclick="javascript:deleteColumns();deleteRows()" class="delete"/></p>
<table id="my-table" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>Variables</td>
</tr>
</table>
<p></center>
</div>
</body>
</html>
Las funciones reseñadas en JQUERY me permiten crear y borrar filas y columnas sin inconvenientes pero mi problema principal es el siguiente: Quiero que solo me genere campos de texto en las cabeceras de la tabla y en el interior de la tabla sean combobox o selects y que también por cada fila y columna que tenga un combobox o selects en común se bloquee o no permita entrada de texto.

Podrían darme algunas luces con respecto a como hacer lo que planteo? Gracias de antemano.

Etiquetas: bloquear, columnas, filas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:25.