Как придать значение заголовкам таблиц?

Question

Контекст

У меня есть таблица внутри разбивки на страницы. Я хочу «Щелкнуть заголовок таблицы, отсортировать по столбцу». Я должен запросить с добавлением order by 'column', потому что я получаю только 50 строк за раз. Так что сортировка в таблице работать не будет. В настоящее время я добился этого, присвоив каждому th разных идентификаторов. Но для этого я хочу использовать класс. Это было бы возможно, если бы th мог хранить значения. Но похоже, что не может.

Вопрос

Как связать произвольную строку с элементом HTML?

Answer 1

Если вы хотите связать произвольную строку с элементом HTML (например, th), , вы можете использовать атрибуты данных .

Вы можете установить собственный атрибут, называемый, например, 'my-string', в HTML с помощью:

<th data-my-string="Mal shot first">...

Или в скрипте с:

myHeader.setAttribute("data-my-string", "Mal shot first");

И вы можно использовать значение с:

let str = myHeader.dataset.myString; // Note the unusual syntax

Свойство .dataset содержит все атрибуты данных (каждый из которых преобразован из kebab-case в camelCase с удаленным префиксом data-).

(Я не был уверен, что вы имели в виду под «Я хочу использовать класс для достижения этого», но, поскольку вы указали, что «это было бы возможно, если бы th мог хранить значения», я подумал, что вы можете найти эту технику полезно.)

Answer 2

вам просто нужно получить cellIndex

const  myTable = document.getElementById('my-table')
  ;
  myTable.onclick=e=>
  {
  if (!e.target.matches('thead td')) return
  let TD = e.target
  TD.className = (TD.className==='')? 'upOrder' : (TD.className==='upOrder') ? 'downOrder' : '';
  
  console.clear()
  console.log('col index=', TD.cellIndex, 'order=', TD.className , 'text=', TD.textContent )
  }

/* cosmetic part */
table {
  border-collapse: collapse;
  margin-top: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  }
thead {
  background-color: aquamarine;
  cursor: pointer;
  }
tbody {
  background-color: #b4c5d8;
  }
td {
  border: 1px solid grey;
  padding: .3em .7em;
  }

thead td > i.fa { display:none; }
thead td.upOrder   > i.fa-caret-up   { display:inline; }
thead td.downOrder > i.fa-caret-down { display:inline; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />

<table id="my-table">
  <thead>
    <tr>
      <td> col_0
        <i class="fa fa-caret-up" ></i>  
        <i class="fa fa-caret-down" ></i> 
      </td> 
      <td> col_1
        <i class="fa fa-caret-up" ></i>  
        <i class="fa fa-caret-down" ></i> 
      </td> 
      <td> col_2
        <i class="fa fa-caret-up" ></i>  
        <i class="fa fa-caret-down" ></i> 
      </td> 
    </tr>
  </thead>
  <tbody>
    <tr> <td>elm col_0</td> <td>elm col_1</td> <td>elm col_2</td> </tr>
    <tr> <td>elm col_0</td> <td>elm col_1</td> <td>elm col_2</td> </tr>
    <tr> <td>elm col_0</td> <td>elm col_1</td> <td>elm col_2</td> </tr>
    <tr> <td>elm col_0</td> <td>elm col_1</td> <td>elm col_2</td> </tr>
  </tbody>
</table>