Как создать JavaScript l oop, который добавляет свойства DOM к атрибутам? - PullRequest
Новая
       7

Как создать JavaScript l oop, который добавляет свойства DOM к атрибутам?

1 голос
/ 02 августа 2020

У меня есть таблица с ячейками, отличными от contentEditable. Однако, используя JavaScript l oop или функцию, я хотел бы сделать их такими.

Я понимаю, что это очень просто сделать вручную для каждой ячейки, и, вероятно, это будет проще для таблица с несколькими ячейками, но я хотел бы ускорить этот процесс с помощью цикла / функции, чтобы таблица могла стать намного больше, а время, потраченное вручную на установку каждой ячейки как contentEditable, было бы утомительным.

Ниже приведен быстрый пример табличного калькулятора, который в настоящее время нельзя редактировать. Но, используя al oop или функцию, я хотел бы установить для каждой ячейки в правом столбце значение .contentEditable = true в DOM. Я предполагаю, что параметры будут выглядеть примерно как (var i = 0; l != rows.length; i < l; i+2), но я борюсь с тем, какими должны быть утверждения, следующие за аргументом, для работы цикла / функции. Любая помощь будет принята с благодарностью! 

function myFunction() {
  var jack2 = document.getElementById("jack").innerText;
  var john2 = document.getElementById("john").innerText;
  var joe2 = document.getElementById("joe").innerText;

  var total2 = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt(joe2) || 0);

  document.getElementById("total").innerHTML = total2;
}
table {
  width: 100%;
}

table,
tr,
th,
td {
  border: 1px solid gray;
  border-collapse: collapse;
  font-family: Arial;
  margin: 5px;
}
<table>
  <caption>Weight Calculator</caption>
  <tr class="cell">
    <th>Person</th>
    <th>Weight (kg)</th>
  </tr>
  <tr class="cell">
    <td>Jack</td>
    <td id="jack" oninput="myFunction()">1</td>
  </tr>
  <tr class="cell">
    <td>John</td>
    <td id="john" oninput="myFunction()">2</td>
  </tr>
  <tr class="cell">
    <td>Joe</td>
    <td id="joe" oninput="myFunction()">3</td>
  </tr>
  <tr class="cell">
    <td>Total</td>
    <td id="total"></td>
  </tr>
</table>

Ответы [ 2 ]

1 голос
/ 02 августа 2020

Получить все ячейки в таблице, у которых есть левый сосед (заголовок не выполняется, потому что есть th, а не td). Добавьте в каждую из этих ячеек свой атрибут.

Отредактировано: Для получения итоговой суммы добавьте прослушиватель событий на каждый td, который вызывает функцию cal c при изменении содержимого. 

function myFunction() {
    let weightCells = document.querySelectorAll("table tr:not(:last-child) td ~ td");
    weightCells.forEach(td => {
        td.setAttribute('contentEditable', true);
        td.addEventListener ("change", calcSum());
    });
}

function calcSum() {
    let sum=0;
    let weightCells = document.querySelectorAll("table tr td ~ td");
    let count = weightCells.length-1;
    for (i=0; i<count; i++) {
        sum +=  parseInt(weightCells[i].innerHTML) || 0;
    }
  weightCells[count].innerHTML = sum;
}

myFunction();
table {
  width: 100%;
}

table,
tr,
th,
td {
  border: 1px solid gray;
  border-collapse: collapse;
  font-family: Arial;
  margin: 5px;
}
<table>
  <caption>Weight Calculator</caption>
  <tr class="cell">
    <th>Person</th>
    <th>Weight (kg)</th>
  </tr>
  <tr class="cell">
    <td>Jack</td>
    <td id="jack" oninput="myFunction()">1</td>
  </tr>
  <tr class="cell">
    <td>John</td>
    <td id="john" oninput="myFunction()">2</td>
  </tr>
  <tr class="cell">
    <td>Joe</td>
    <td id="joe" oninput="myFunction()">3</td>
  </tr>
  <tr class="cell">
    <td>Total</td>
    <td id="total"></td>
  </tr>
</table>
1 голос
/ 02 августа 2020

Вы можете выбрать всю таблицу, затем использовать querySelectorAll, чтобы получить все строки, затем для каждой строки измените contenteditable для второго td следующим образом

codepen 

let table = document.getElementById('table')
let rows = table.querySelectorAll('tr')

rows.forEach(row => {
  let tds = row.querySelectorAll('td') 
  // all the cells of the row
  if (tds.length > 0) { // if it is not the header
    tds[1].contentEditable = true 
    // change the contenteditable
  }
})

(вам нужно добавить идентификатор в свою таблицу, если у вас более одной таблицы) 

<table id="table">
...
</table>
...