Como estudar o HTML?

Frank K Hosaka · Julho 18, 2022

Eu não sabia nada de HTML, mas fui aprendendo aos poucos com a ajuda do PHP. O PHP é o meu único canal entre o banco de dados MySQL e o navegador. Eu apanhei bastante para aprender como usar o marcador <table>, e eu acredito que já consigo usar 2% dos recursos embutidos nesse marcador. Graças ao Wash aqui do fórum, eu aprendi como colocar um <form> dentro de uma célula do <table>, ele me ensinou a usar o marcador <style>.

Mas 2% é bem pouco para apresentar o meu currículo no concorrido mundo dos desenvolvedores, não dá para pegar um emprego de auxiliar de desenvolvedor que ganha mais ou menos R$ 1.212,00 por mês. Para pegar um emprego desses, eu preciso chegar a 3%.

O correto é pedir ajuda ao MEC para buscar uma biblioteca em Diadema onde eu encontre um livro que fale sobre HTML, mas o problema é que eu não sei como usar o portal do MEC. Eu coloco "biblioteca" na caixa de busca, ele apresenta um monte de tópicos, mas nada de endereço de bibliotecas. Esse é outro drama. Se eu soubesse como usar essas caixas de busca, certamente seria fácil dominar 3% dos recursos do <table>.

Assim, eu decidi entrar na próxima página do fórum do Script Brasil. E acabei encontrando o Wash de novo. Dessa vez, ele estava ajudando um rapaz a montar a frequência escolar com esse exemplo: Frequency Table (w-studies.github.io) - eu fiquei de boca aberta, isso sim é bela obra de arte.

Mas, como é que vou ver o código HTML dessa página?

Usei o método da tentativa e erro. No topo da janela do Microsoft Edge encontrei os três pontinhos, e lá encontrei a opção Downloads, e depois recebi a mensagem que foi feito o download, pedi para abrir a pasta onde foi feito o download, e advinha o que eu encontrei: nada!

Tentei de novo, usei o botão direito do mouse no meio da página, e encontrei a opção Salvar Como, mudei a pasta para a área de trabalho, e finalmente consegui baixar a página e até uma pasta com os arquivos que davam suporte à pagina. Usei o notepad++ e vi o seguinte:

frequency table.html
-----------------------------------------------------------
<!DOCTYPE html>
<!-- saved from url=(0044)https://w-studies.github.io/frequency-table/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Frequency Table</title>
  <link rel="stylesheet" href="./Frequency Table_files/style.css">
  <style id="table-column">
      table thead tr th:nth-child(33),
      table tbody tr td:nth-child(33){
        background-color: #fffce7;
      }
    </style>
</head>
<body>
<div class="app">
  <header>HEADER</header>
  <main>
    <h1 class="fw-light m-0">Frequency Table</h1>
    <div class="p-12 d-block">
      <label>Student</label>
      <input type="text" name="studend">
      <small class="feedback">Digite o nome do aluno</small>
    </div>
    <div class="p-12">
      <a href="https://w-studies.github.io/frequency-table/">Novo</a>
    </div>
    <div class="h-sroll">
      <table>
        <thead><tr><th>Mês/Dia</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>22</th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th><th>29</th><th>30</th><th>31</th><th>Total Falta</th><th>Total Abon.</th><th>Total Pres.</th><th>% Freq.</th></tr></thead>
        <tbody><tr><td>JAN.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>FEV.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>MAR.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>ABR.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>MAI.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>JUN.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>JUL.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>AGO.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>SET.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>OUT.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>NOV.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr><tr><td>DEZ.</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>0</td><td>0</td><td>0</td><td></td></tr></tbody>
      </table>
    </div>
    <div class="text-center p-12">
      <button class="p-12">Save</button>
      <div class="list p-12"></div>
    </div>
  </main>
  <footer>
    <small>© 2022 - Frequency Table - <a href="https://github.com/w-studies/frequency-table">repository</a></small>
  </footer>
</div>

<script src="./Frequency Table_files/app.js.baixados"></script>


</body></html>

app.js.baixados
------------------------------------------------------------------------------------------------------------
const frequencyTable = document.querySelector('table')
const tableColumStyle = document.querySelector('#table-column')
const inputName = document.querySelector('input')
const params = new URLSearchParams(location.search)
const userId = params.get('id')
const eList = document.querySelector('.list')
const tdOptions = [{
  option: 'P', class: 'present',
}, {
  option: 'F', class: 'ausent',
}, {
  option: 'A', class: 'aboned',
}, {
  option: '', class: '',
}]

//
const calcTotalFrom = [         // presence total
  {child: 2, class: 'present'}, // aboned total
  {child: 3, class: 'aboned'}, // ausent total
  {child: 4, class: 'ausent'}]

const thirtyOne = Array.from({length: 31}, (_, i) => i + 1)

// THEAD
const headTexts = ['Mês/Dia', ...thirtyOne, 'Total Falta', 'Total Abon.', 'Total Pres.', '% Freq.']
// create a tr
const row = document.createElement('tr')
for (const index of headTexts) {
  // create a th
  const th = document.createElement('th')
  th.innerText = index
  row.append(th)
}

frequencyTable.querySelector('thead').append(row)

const getMothName = (date, length = 'short') => {
  return new Date(date).toLocaleDateString('pt-br', {
    month: length,
  })
}

// TBODY
const fillTbody = (data = []) => {
  for (let m = 0; m < 12; m++) {
    // create a tr
    const row = document.createElement('tr')

    const currentMonthData = data[m] ?? null

    for (const index in headTexts) {

      const cell = row.insertCell()
      // insert first cell with month name
      if (index == 0) {
        cell.innerHTML = getMothName(new Date().setMonth(m)).toUpperCase()
      } else if (currentMonthData) {
        const setIndex = parseInt(currentMonthData.days[index])
        if (setIndex > -1) {
          cell.dataset.option = setIndex
          cell.className = tdOptions[setIndex].class
          cell.innerText = tdOptions[setIndex].option
        }
      } else {
        cell.innerHTML = ''
      }

    }

    // insert complete tr into tbody
    frequencyTable.querySelector('tbody').append(row)
    calcTotals([row])
  }

// highlight
  for (const col of calcTotalFrom) {
    for (const cell of frequencyTable.querySelectorAll(`td:nth-last-child(${col.child})`)) {
      const tr = cell.parentNode
      cell.addEventListener('mouseover', () => {
        for (const check of tr.getElementsByClassName(col.class)) {
          check.classList.add('border')
        }
      })
      cell.addEventListener('mouseout', () => {
        for (const check of tr.getElementsByClassName(col.class)) {
          check.classList.remove('border')
        }
      })
    }
  }
}

// highlight columns
frequencyTable.addEventListener('mouseover', e => {
  const element = e.target
  if (element.matches('td, th')) {
    const index = ++element.cellIndex
    if (index > 1) {
      tableColumStyle.innerHTML = `
      table thead tr th:nth-child(${index}),
      table tbody tr td:nth-child(${index}){
        background-color: #fffce7;
      }
    `
    }
  }
})

// unhighlight columns
frequencyTable.addEventListener('mouseout', e => {
  tableColumStyle.innerHTML = ''
})

// when clicking on a cell
frequencyTable.addEventListener('click', e => {
  const element = e.target
  if (element.matches('td')) {
    const elementIndex = ++element.cellIndex
    if (elementIndex > 1 && elementIndex < 33) {
      const optionIndex = element.dataset.option || 0

      let setIndex = 0

      if (optionIndex && optionIndex < tdOptions.length - 1) {
        setIndex = +optionIndex + 1
      }

      element.dataset.option = setIndex
      element.className = tdOptions[setIndex].class
      element.innerText = tdOptions[setIndex].option

      calcTotals([element.parentNode])
    }

  }
})

const calcTotals = (trs) => {
  // calc totals
  trs = trs || frequencyTable.querySelectorAll('tr > td[class]:first-of-type')
  for (const tr of trs) {
    for (const object of calcTotalFrom) {
      tr.querySelector(`td:nth-last-child(${object.child})`).innerHTML = tr.getElementsByClassName(object.class).length
    }
  }
}

document.querySelector('button').addEventListener('click', async () => {
  const name = inputName.value
  if (!name) {
    inputName.className = 'is-invalid'
    return false
  }

  inputName.className = ''

  const frequencySchema = []
  const trs = frequencyTable.querySelectorAll('tbody tr')
  for (const tr of trs) {
    const cells = tr.querySelectorAll('td:nth-child(n+2):nth-child(-n+32)')
    const month = {month: tr.rowIndex, days: []}
    for (const c of cells) {
      month.days[c.cellIndex] = c.dataset.option || 3
    }
    frequencySchema.push(month)
  }

  const fData = new FormData()

  fData.append('name', name)
  fData.append('frequency', JSON.stringify(frequencySchema))

  const response = await saveStudent(fData)

  // se response estiver ok
  if (response.statusCode === 200) {
    window.location = './'
  } else {
    eList.classList.add('text-danger')
    eList.innerHTML = response.body
  }
})

/**
 * Funçõo para submeter requests a um servidor, esperendo json como resposta
 * @param url
 * @param data
 * @param method
 * @returns {Promise<any>}
 */
const fetchJson = async (url, data, method = 'POST') => {

  const headers = {
    method: method,
  }

  if (method === 'POST') {
    headers.body = data
  }

  // faz o request
  const request = await fetch(url, headers)

  try {

    // converte o resultado da request em json
    const body = await request.json()
    // retorna a resposta
    return {statusCode: request.status, body}
  } catch (e) {
    return {statusCode: 404, body: e}
  }
}

/**
 * Função pra buscar students
 * @param id
 * @returns {Promise<*>}
 */
const getStudents = async (id) => {
  const response = await fetchJson(`api/${id ? `?id=${id}` : ''}`, '', 'GET')

  // se response estiver ok
  if (response.statusCode === 200 && response.body.data) {
    return response.body.data
  }
}

const fillList = (data) => {
  for (const s of data) {
    const a = document.createElement('a')
    a.href = `?id=${s.id}`
    a.className = 'p-12'
    a.innerText = s.student

    eList.append(a)
  }
}

/**
 * Função para salvar students
 * @param id
 * @returns {Promise<void>}
 */
const saveStudent = async (data, id) => {

  id = id || userId
  const response = await fetchJson(`api/save/${id ? `?id=${id}` : ''}`, data)

  return response
}

// assim q o html for carregado
document.addEventListener('DOMContentLoaded', async (e) => {
  // carrega a página inicial
  const students = await getStudents()
  if (students) {
    fillList(students)
  }

  if (userId && students) {
    inputName.parentNode.className = 'd-none'
    const [register] = students.filter(student => student.id == userId)

    if (register) {
      inputName.value = register.student
      fillTbody(JSON.parse(register.frequency))
    }
  } else {
    fillTbody()
  }
})
    
    
sytile.css
-------------------------------------------------------------------------------------------

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 12px;
  min-height: 100%;
}

/* estiliza o layout */
.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border: thin solid #eee
}

main {
  flex: 1;
  background-color: #fafafa;
  padding: 6px;
}

.app > header,
.app > footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.app > header {
  height: 55px;
  border-bottom: thin solid #ccc;
}

.app > footer {
  border-top: thin solid #ccc;
  height: 40px;
}

/* table */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  background-color: #fff;
}

th, td {
  border: thin solid #ccc;
  padding: 12px 4px;
  min-width: 30px;
  transition: all .3s ease;
}

th {
  padding: 12px 6px;
  background-color: #f6f6f1;
}

th:first-child {
  background-color: #eee;
}

th:nth-last-child(4) {
  background-color: #ffe2eb;
}

th:nth-last-child(3) {
  background-color: #fffed7;
}

th:nth-last-child(2) {
  background-color: #ecfdec;
}

th:last-child {
  background-color: #d8ffd8;
}

tbody tr:nth-child(odd) td {
  background-color: #fafafa;
}

tbody tr:hover td {
  background-color: #fffce7;
}

tbody td {
  text-align: center;
  position: relative;
  z-index: 1;
}

tbody td:nth-child(n+2):nth-child(-n+32) {
  cursor: pointer;
}

tbody td:first-child {
  text-transform: uppercase;
}

td.present {
  background-color: #dffadf !important;
}

td.present.border {
  background-color: darkgreen !important;
  color: #fff;
}

td.ausent {
  background-color: #fadfdf !important;
}

td.ausent.border {
  background-color: red !important;
  color: #fff;
}

td.aboned {
  background-color: #fffed7 !important;
}

td.aboned.border {
  background-color: #d07600 !important;
  color: #fff;
}

td:hover, td.border {
  border: thin double #333 !important;
  z-index: 55;
}


/* classes de texto */
.text-danger {
  color: red;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: right;
}

.fw-light {
  font-weight: lighter;
}

/**/
.m-0 {
  margin: 0;
}

.p-12 {
  padding: 12px;
}

.d-none {
  display: none;
}

.d-block + .p-12 {
  display: none;
}

.h-sroll {
  overflow-x: auto;
}

/**/
input {
  padding: 6px;
  border: thin solid #888;
  display: block;
  border-radius: 6px;
}

input + .feedback {
  display: none;
}

input.is-invalid {
  border-color: red;
}

input.is-invalid + .feedback {
  display: block;
  color: red;
}

Agora, só falta fazer um bom curso de inglês para conseguir dominar 3% dos recursos do <table>. É mole?

Editado Julho 18, 2022 por Frank K Hosaka

Frank K Hosaka · Julho 18, 2022

Com 2% do que sei sobre <table>, eu consegui isso:

<style>
td {background-color: lightgray}
</style>
<?php
echo "<table><tr><th>";
for ($k=1;$k<=31;$k++){
	echo "<th>".str_pad($k, 2, 0, STR_PAD_LEFT);}
for ($j=1;$j<=12;$j++){
	echo "<tr><td>$j";
	for ($i=1;$i<=31;$i++){
		echo "<td>";}}
echo "</table>";

Editado Julho 18, 2022 por Frank K Hosaka

wash · Julho 18, 2022

Bão Sr. @Frank K Hosaka?
No rodapé do link supracitado, há um link pro repositório no git: https://github.com/w-studies/frequency-table
Onde se encontra todo o código fonte. Até o database.
E com a parte em php, rodando no seu servidor local, vai poder observar os trechos que persistem e consultam os dados no database.
A tabela html foi gerada usando js.

image.png.e2b625bdc1c736b4196b49850c579d1d.png
É só clicar ali em code -> download ZIP para baixar um cópia integral da sugestão que escrevi.

Há muitos canais que ensinam html no youtube.
O do Gustavo Guanabara é muito citado. Já deu uma conferida lá?

Frank K Hosaka · Julho 18, 2022

Olá, Wash, eu consegui baixar o código. O problema é como entender. O meu nível de compreensão é de apenas 2%, eu não tenho a menor ideia de como funciona a tabela de frequência que você publicou, mas eu gostei dele, principalmente quando você clica uma data e escreve P de "Presente", clica de novo e aparece A de "Ausente", clica de novo e aparece B de "Bonado".

Por enquanto, eu só consegui escrever "P" de "Presente", veja só:

<style>
td {background-color: lightgray}
</style>
<script>
function escreve(id) {
	e=document.getElementById(id)
	e.innerHTML="P"}
</script>
<?php
echo "<table><tr><th>";
for ($k=1;$k<=31;$k++){
	echo "<th>".str_pad($k, 2, 0, STR_PAD_LEFT);}
for ($j=1;$j<=12;$j++){
	echo "<tr><td>$j";
	for ($i=1;$i<=31;$i++){
		echo "<td id=t".$j."-".$i." onclick=escreve(id)>";}}
echo "</table>";

Frank K Hosaka · Julho 18, 2022

Com uma pequena alteração na função escreve(id), agora consigo escrever P,F,A ou nada, quando seleciono uma caixa.

<style>
td {background-color: lightgray}
</style>
<script>
function escreve(id) {
	e=document.getElementById(id)
	texto=e.innerHTML
	if (texto==""){e.innerHTML="P"}
	if (texto=="P"){e.innerHTML="F"}
	if (texto=="F"){e.innerHTML="A"}
	if (texto=="A"){e.innerHTML=""}}
</script>
<?php
echo "<table><tr><th>";
for ($k=1;$k<=31;$k++){
	echo "<th>".str_pad($k, 2, 0, STR_PAD_LEFT);}
for ($j=1;$j<=12;$j++){
	echo "<tr><td>$j";
	for ($i=1;$i<=31;$i++){
		echo "<td id=t".$j."-".$i." onclick=escreve(id)>";}}
echo "</table>";

Frank K Hosaka · Julho 18, 2022

Outra coisa bacana na tabela de frequência é que ele soma as presenças, faltas e abonos assim que você registra o status do aluno no dia que você selecionar.

Para repetir a mesma proeza, eu tive que usar uma matriz.

<style>
td {background-color: lightgray}
th.col {width:70px}
</style>
<script>
var matriz=new Array(30)
for (i=0;i<=11;i++){matriz[i]=new Array(30)}
function escreve(id,linha,coluna) {
	e=document.getElementById(id)
	texto=e.innerHTML
	if (texto==""){
		e.innerHTML="P"
		matriz[linha-1][coluna-1]="P"}
	if (texto=="P"){
		e.innerHTML="F"
		matriz[linha-1][coluna-1]="F"}
	if (texto=="F"){
		e.innerHTML="A"
		matriz[linha-1][coluna-1]="A"}
	if (texto=="A"){
		e.innerHTML=""
		matriz[linha-1][coluna-1]=""}
	P=0;F=0;A=0
	for (iColuna=0;iColuna<=30;iColuna++){
		texto=matriz[linha-1][iColuna]
		if (texto=="P") {P++}
		if (texto=="F") {F++}
		if (texto=="A") {A++}}
	if (P==0){P=""}
	if (F==0){F=""}
	if (A==0){A=""}
	nid="tp"+linha
	e=document.getElementById(nid)
	e.innerHTML=P
	nid="tf"+linha
	e=document.getElementById(nid)
	e.innerHTML=F
	nid="ta"+linha
	e=document.getElementById(nid)
	e.innerHTML=A
}
</script>
<?php
echo "<table><tr><th>";
for ($k=1;$k<=31;$k++){
	echo "<th>".str_pad($k, 2, 0, STR_PAD_LEFT);}
echo "<th class=col>Total<br>Falta<th classs=col>Total<br>Presença<th class=col>Total<br>Abono<th>%<br>Frequência";
for ($j=1;$j<=12;$j++){
	echo "<tr><td>$j";
	for ($i=1;$i<=31;$i++){
		echo "<td id=t".$j."-".$i." onclick=escreve(id,$j,$i)>";}
	echo "<td id=tf".$j." align=right><td id=tp".$j." align=right><td id=ta".$j." align=right><td>";}
echo "</table>";

Frank K Hosaka · Julho 19, 2022

Finalmente, coloquei uma rotina que pega a matriz que está no mundo do javascript e manda para o mundo do PHP, isso é uma das grandes dificuldades que encontrei. Copiei alguns CSS do tabela de frequencia original, como destacar a célula onde está o mouse, destacar a linha em que o mouse está, só não consegui ver como destacar a coluna onde está o mouse.

<style>
tbody tr:hover td {background-color: lightblue}
th, td {border: thin solid #ccc;padding: 4px 4px;transition: all .3s ease;}
td:hover, td.border {border: thin double #333 !important;z-index: 55;}
td {background-color: lightgray}
th {background-color: lightgreen}
</style>
<script>
var matriz=new Array(12)
for (i=0;i<=11;i++){matriz[i]=new Array(31)}
function escreve(id,linha,coluna) {
	e=document.getElementById(id)
	texto=e.innerHTML
	if (texto==""){
		e.innerHTML="P"
		matriz[linha-1][coluna-1]="P"}
	if (texto=="P"){
		e.innerHTML="F"
		matriz[linha-1][coluna-1]="F"}
	if (texto=="F"){
		e.innerHTML="A"
		matriz[linha-1][coluna-1]="A"}
	if (texto=="A"){
		e.innerHTML=""
		matriz[linha-1][coluna-1]=""}
	P=0;F=0;A=0
	for (iColuna=0;iColuna<=30;iColuna++){
		texto=matriz[linha-1][iColuna]
		if (texto=="P") {P++}
		if (texto=="F") {F++}
		if (texto=="A") {A++}}
	if (P==0){P=""}
	if (F==0){F=""}
	if (A==0){A=""}
	nid="tp"+linha
	e=document.getElementById(nid)
	e.innerHTML=P
	nid="tf"+linha
	e=document.getElementById(nid)
	e.innerHTML=F
	nid="ta"+linha
	e=document.getElementById(nid)
	e.innerHTML=A
	nid="tfr"+linha
	e=document.getElementById(nid)
	if (A==""){A=0}
	if (P==""){P=0}
	frequencia=A+P
	if (frequencia>22) {
		frequencia = 100} else {
		frequencia = parseInt((A+P)/22*100)}
	e.innerHTML=frequencia
	
}
function salvar() {inpg.name='salvar';inpg.value=JSON.stringify(matriz);frmg.submit()}
</script>
<h2>Grupo Escolar Script Brasil</h2>
<h3>Aluno: Frank K Hosaka, 2a. Série do Primário</h3>
<?php
if (isset($_POST['salvar'])){
	$matriz=json_decode($_POST['salvar']);
	var_dump($matriz);
	exit;}
echo "<table><tr><th>";
for ($k=1;$k<=31;$k++){
	echo "<th>".str_pad($k, 2, 0, STR_PAD_LEFT);}
echo "<th class=col>Total<br>Falta<th classs=col>Total<br>Pres.<th class=col>Total<br>Abon.<th>%<br>Freq.";
$mes=["jan","fev","mar","abr","mai","jun","jul","ago","set","out","nov","dez"];
for ($j=1;$j<=12;$j++){
	$l=$j-1;
	echo "<tr><td>$mes[$l]";
	for ($i=1;$i<=31;$i++){
		echo "<td id=t".$j."-".$i." onclick=escreve(id,$j,$i)>";}
	echo "<td id=tf".$j." align=right><td id=tp".$j." align=right><td id=ta".$j." align=right><td id=tfr".$j." align=right>";}
echo "</table>";
echo "<p><input type=submit  value=Salvar onclick=salvar()>";
echo "<form id=frmg method=post><input type=hidden id=inpg></form>";

wash · Julho 19, 2022

No html criei uma tag style com id, assim:

<style id='table-column'></style>

Resolvi o highlight columns em js, da seguinte forma:

const frequencyTable = document.querySelector('table')
const tableColumStyle = document.querySelector('#table-column')

// highlight columns
frequencyTable.addEventListener('mouseover', e => {
  const element = e.target
  if (element.matches('td, th')) {
    const index = ++element.cellIndex
    if (index > 1) {
      tableColumStyle.innerHTML = `
      table thead tr th:nth-child(${index}),
      table tbody tr td:nth-child(${index}){
        background-color: #fffce7;
      }
    `
    }
  }
})

// unhighlight columns
frequencyTable.addEventListener('mouseout', e => {
  tableColumStyle.innerHTML = ''
})

em outras palavras: quando o mouse estiver sobre uma th ou td, um estilo diferente vai ser escrito dentro de <style id='table-column'></style>
e quando o mouse sair da tabela, o conteúdo dessa tag style vai ser apagado.

Editado Julho 19, 2022 por wash

Frank K Hosaka · Julho 19, 2022

Obrigado, Wash, mas isso dai está fora do meu alcance. Eu não sei o que é por exemplo nth-child, e nem como funciona o token "e" no js, isso sem falar do operador "=>". Eu já vi vários novos operadores como "|", ou "!=", ou, no seu caso, index = ++element.

Eu tentei adaptar por aqui e não deu certo. Certamente, eu fiz alguma besteira, mas eu não consigo enxergar aonde. O nome disso é analfabetismo digital.

Se sobrar algum tempo, tem jeito de usar esses códigos do <style> descartável numa tabela 5x5? Eu gostei do efeito cruzeta. Mesmo que eu não saiba como ler o código, sem dúvida vou dar um jeito de aproveitar a dica no meu código.

Entrar

Como estudar o HTML?

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

wash

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

wash

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades