estoy siguiendo una guía para crear una vista PHP
donde subo un archivo Exce
l y este me los muestra en una tabla HTML
utilizando JavaScript
. todo va bien hasta que se me ocurrió poder personalizar una de las columnas para destacarla de las demás y posterior imprimir desde el navegador. sucede que estoy intentando seleccionar la primera columna, pero no le encuentro como hacerle.
agradecería su gran ayuda de indicarme como puedo seleccionar la columna para posterior aplicar estilos css.
Este es el etiquetado HMTL y el script empleado para completar la accion
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convertir Excel en HTML</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="http://fonts.cdnfonts.com/css/ccode39" rel="stylesheet">
</head>
<body>
<div class="container">
<h2 class="text-center mt-4 mb-4">Convertir Excel en HTML </h2>
<div class="card">
<div class="card-header">Seleccione archivo Excel</div>
<div class="card-body">
<input type="file" id="excel_file" />
</div>
</div>
</div>
<div id="datos">
<div id="excel_data" class="mt-1"></div>
</div>
<script>
const excel_file = document.getElementById('excel_file');
excel_file.addEventListener('change', (event) => {
if(!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type))
{
document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';
excel_file.value = '';
return false;
}
var reader = new FileReader();
reader.readAsArrayBuffer(event.target.files[0]);
reader.onload = function(event){
var data = new Uint8Array(reader.result);
var work_book = XLSX.read(data, {type:'array'});
var sheet_name = work_book.SheetNames;
var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});
if(sheet_data.length > 0)
{
var table_output = '<table class="table" style="table-layout:none" border="1">';
for(var row = 0; row < sheet_data.length; row++)
{
table_output += '<tr class="thead-dark">';
for(var cell = 0; cell < sheet_data[row].length; cell++)
{
if(row == 0)
{
table_output += '<th>'+sheet_data[row][cell]+'</th>';
}
else
{
table_output += '<td>'+sheet_data[row][cell]+'</td>';
}
}
table_output += '</tr>';
}
table_output += '</table>';
document.getElementById('excel_data').innerHTML = table_output;
}
excel_file.value = '';
}
});
</script>
</body>
</html>
les agradezco de antemano Saludos
else { table_output += '<td>'+sheet_data[row][cell]+'</td>'; }
puedes agregar otroif
, algo así:else { if (cell == 0) { //aquí poner al td el estilo que quieras } else { table_output += '<td>'+sheet_data[row][cell]+'</td>';} }