Tengo el siguiente código:
Código:
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.<!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>
Podrían darme algunas luces con respecto a como hacer lo que planteo? Gracias de antemano.
