Как я могу положить <td>на ячейки таблицы? - PullRequest
Новая
       21

Как я могу положить <td>на ячейки таблицы?

0 голосов
/ 27 января 2020

Сначала я создал таблицу с заголовками дат в другом формате, такими как номер григорианской даты и название дней недели, а также номер персидской даты. Я хочу покрасить их, когда выделю несколько ячеек и отобразить их как ячейку, в которой можно написать текст, например, на изображении ниже:

! [Желаемое фото таблицы] [1]

пожалуйста помогите мне отредактировать коды для создания таблицы, например верхнего изображения.

Таблица, которую я сделал, выглядит следующим образом: 

let jyear = moment().locale('fa').format('YYYY');
let jmonth = moment().locale('fa').format('M');
console.log("jyear", jyear);
console.log("jmonth", jmonth);

var d = new Date();
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

document.getElementById("EN-Year").innerHTML = d.getFullYear();
document.getElementById("EN-Month").innerHTML = months[d.getMonth()] + '-' + months[d.getMonth() + 1];
document.getElementById("shamsi_year").innerHTML = jyear;
document.getElementById("shamsi_month").innerHTML = moment().locale('fa').format('jMMMM');
document.getElementById("shamsi_month2").innerHTML = moment().locale('fa').format('jMMMM');

renderHeaderGrid(jyear, jmonth);

function renderHeaderGrid(jyear, jmonth) {
  let jDate = moment.from(`${jyear}/${jmonth}/01`, 'fa', 'YYYY/MM/DD');
  jDate = jDate.locale("fa");
  let daysInMonth = jDate.daysInMonth();
  let miladi_date = jDate.locale("en");

  for (let i = 0; i < daysInMonth; i++) {

    let miladiDayNameInWeek = miladi_date.format("dd"); //miladi day name of weeek
    let miladiDayInMonth = miladi_date.format("DD"); //miladi day num
    let shamsiDayInMonth = jDate.format("jDD"); //shamsi day num
    let th_week_name = document.createElement("th");
    let th_day_num = document.createElement("th");
    let th_shamsi_day_num = document.createElement("th");
    th_week_name.innerText = miladiDayNameInWeek;
    th_day_num.innerText = miladiDayInMonth;
    th_shamsi_day_num.innerText = shamsiDayInMonth;
    document.getElementById("tr_days_name").append(th_week_name);
    document.getElementById("tr_days_num").append(th_day_num);
    document.getElementById("tr_days_shamsi_num").append(th_shamsi_day_num);

    miladi_date.add(1, "d");
  }
}
* {
  direction: rtl;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  position: relative;
}

.table {
  width: 100%;
}

.month {
  background-color: orange;
}

.place {
  background-color: rgb(77, 207, 77);
}

.other,
.title {
  background-color: rgb(141, 140, 140);
}
<table id="ttt" class="table" border="1" summary="This table gives some statistics about fruit
                           flies: average height and weight, and percentage
                           with red eyes (for both males and females).">
  <caption>
    <EM>A test table with merged cells</EM>
  </caption>
  <tr>
    <th class="title" colspan="34"></th>
  </tr>
  <tr id="tr_days_name">
    <th colspan="4">DAY</th>
  </tr>
  <tr id="tr_days_num" colspan="2">
    <th id="EN-Year" colspan="2"></th>
    <th id="EN-Month" class="month" colspan="2"></th>

  </tr>
  <tr rowspan="1" colspan="2" id="tr_days_shamsi_num">
    <th id="shamsi_year" colspan="2"></th>
    <th id="shamsi_month" class="month" colspan="2"></th>

  </tr>

  <tr id="firstplace">
    <th id="shamsi_month2" colspan="2" rowspan="6"></th>
    <th class="place" colspan="2"></th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th class="place" colspan="2"></th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th class="place" colspan="2"></th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th class="place" colspan="2"></th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th class="place" colspan="2"></th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th class="other" colspan="2"></th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>



<script src="https://unpkg.com/jalali-moment/dist/jalali-moment.browser.js"></script>

1 Ответ

0 голосов
/ 27 января 2020

Надеюсь, что это дает вам представление: 

const cells = document.querySelectorAll(".cell");

cells.forEach((cell, i) => {
  cell.addEventListener("click", () => {
    cell.innerHTML = `<input type="text" id="cell-input_${i}">`
    
    const cellInput = document.querySelector(`#cell-input_${i}`)
    cellInput.focus()
    cellInput.addEventListener("blur", () => {
      cell.innerHTML = cellInput.value
    });
  });
});
.cell {
  border: 1px solid black;
  height: 20px;
  min-width: 20px;
}
<table>
  <tr>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
</table>
...