0
150
Vistas¿Cómo agregar un encabezado de tabla a esta tabla div dentro de un script?
Obtuve esta div-table llena dinámicamente, pero no puedo encontrar una manera de agregarle un encabezado, dada la forma en que se está construyendo.
pieza HTML :
<div class="block div-table" id="sidebar-record-block"></div>Este es el script que llena la tabla dinámicamente:
function showRecord(record) { if (record.length) { for (var i = 0; i < record.length; i++) { // build field name on the fly, formatted field-1234 var str = '' + i; var fieldId = 'field-' + ('0000' + str).substring(str.length) // If this field # doesn't already exist on the page, create it if (!$('#'+fieldId).length) { var newField = $($.parseHTML('<div id="'+fieldId+'"></div>')); $('#sidebar-record-block').append(newField); } // Replace content of the field div with new record $('#'+fieldId).replaceWith('<div id="'+fieldId+'" class="div-table-row"></div>'); $('#'+fieldId).append('<input id=checkBox type="checkbox"</input>') .append($('<div class="div-table-th">' + record[i].heading + '</div>')) .append('<div class="div-table-td">' + record[i].cellval + '</div>') } }Así es como es css:
.div-table { display: table; width: auto; border-spacing: 3px; } .div-table-row { display: table-row; width: auto; clear: both; } .div-table-td, .div-table-th { display: table-cell; width: 190px; background-color: rgb(245, 241, 239); } Aquí está el resultado esperado: 
¡Aprecio tu ayuda!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
En realidad tienes casi todo lo que necesitas todavía. El truco es simplemente agregar los encabezados de sus filas como un elemento de fila con un estilo diferente a su tabla personalizada.
Por ejemplo:
.div-table { display: table; width: auto; border-spacing: 3px; } .div-table-row { display: table-row; width: auto; clear: both; } .div-table-td, .div-table-th { display: table-cell; width: 190px; background-color: rgb(245, 241, 239); } .div-table-header { display: table-cell; width: 190px; text-align: center; } <div class="block div-table" id="sidebar-record-block"> <div class="div-table-row"> <div>Sel</div> <div class="div-table-header">Color</div> <div class="div-table-header">Hex</div> </div> <div class="div-table-row"> <input type="checkbox"> <div class="div-table-th">amarelo suave</div> <div class="div-table-td">EEEA97</div> </div> <div class="div-table-row"> <input type="checkbox"> <div class="div-table-th">verde</div> <div class="div-table-td">00FF00</div> </div> </div>Crear esto dinámicamente en tiempo de ejecución no es muy diferente del código que ya tiene.
Simplemente agregue lo siguiente al comienzo de su ciclo for:
if(i==0) { $('#sidebar-record-block').append($($.parseHTML('<div class="div-table-row"><div>Sel</div><div class="div-table-header">Color</div><div class="div-table-header">Hex</div></div>'))); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta