0
153
Visualizações¿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 Respostas
Responde à pergunta0
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
Relatório
Responde à pergunta