Как получить td inner HTML на строку и затем установить div css на строку на основе этого значения - PullRequest
Новая
       2

Как получить td inner HTML на строку и затем установить div css на строку на основе этого значения

3 голосов
/ 21 февраля 2020

У меня есть таблица согласно приведенному ниже, и я хочу использовать javascript или Jquery, чтобы получить значение из средней ячейки каждой строки. Затем я хочу увидеть ширину div (id="myprogres") в последней ячейке, чтобы соответствовать проценту, который мы только что получили.

Мои проблемы, о которых я знаю,

  • Я хочу получить значение в каждой строке, а затем установить соответствующую ширину myprogress на основе этого значения.
  • myprogress не является уникальным id, это то же самое id для строки.

Это упрощенная версия таблицы, поэтому я ценю полную css не там. 

<table>
  <tr>
    <td>Hard drive</td>
    <td>Usage</td>
    <td>25</td>
    <td>
      <div style="width:100%">
        <div id="myprogress"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>Memory</td>
    <td>Usage</td>
    <td>50</td>
    <td>
      <div style="width:100%">
        <div id="myprogress"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>Brain Power</td>
    <td>Usage</td>
    <td>75</td>
    <td>
      <div style="width:100%">
        <div id="myprogress"></div>
      </div>
    </td>
  </tr>
</table>

Ответы [ 3 ]

2 голосов
/ 21 февраля 2020

Мои td теги не имеют id или чего-либо уникального для их идентификации.

Это не проблема, так как вы можете l oop более непосредственно индикаторы выполнения.

Я хочу получить значение в каждой строке, а затем установить соответствующую ширину myprogress на основе этого значения.

Как указано выше, вы можете l oop поверх индикаторов выполнения и используйте методы обхода DOM, чтобы получить соответствующее значение из предыдущей ячейки td, чтобы установить в качестве ширины бара. В частности, методы closest() и prev().

myprogress не является уникальным идентификатором, это один и тот же идентификатор для строки.

Это недопустимо HTML и должен быть исправлен. Вместо этого используйте class.

С учетом всего сказанного попробуйте следующее: 

$('.myprogress').css('width', function() {
  return $(this).closest('td').prev().text() + '%';
});
table {
  width: 100%;
}
table td {
  width: 25%;
}
.myprogress {
  height: 20px;
  background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
  <tr>
    <td>Hard drive</td>
    <td>Usage</td>
    <td>25</td>
    <td><div class="myprogress"></div></td>
  </tr>
  <tr>
    <td>Memory</td>
    <td>Usage</td>
    <td>50</td>
    <td><div class="myprogress"></div></td>
  </tr>
  <tr>
    <td>Brain Power</td>
    <td>Usage</td>
    <td>75</td>
    <td><div class="myprogress"></div></td>
  </tr>
</table>
1 голос
/ 21 февраля 2020

Используя чистый ваниль JS, вы можете добиться результата без jquery, с помощью querySelector () метод .. 

const table = document.querySelector('table');
const row = table.querySelectorAll('tr');

row.forEach((tr,i) => {
  const width = tr.querySelectorAll("tr td:nth-of-type(3)")[0].textContent;
  const progress = tr.querySelectorAll("tr td:nth-of-type(4)")[0];
  progress.querySelector('div').style.width = `${width}%`;
})
table td {
  width: 10%;
}
#myprogress {
  height: 20px;
  background-color: green;
}
<table>
      <tr>
         <td>Hard drive</td>
         <td>Usage</td>
         <td>25</td>
         <td>
            <div style="width:100%">
                <div id="myprogress"></div>
            </div>
         </td>
      </tr>
    <tr>
         <td>Memory</td>
         <td>Usage</td>
         <td>50</td>
         <td>
            <div style="width:100%">
                <div id="myprogress"></div>
            </div>
         </td>
      </tr>
<tr>
         <td>Brain Power</td>
         <td>Usage</td>
         <td>75</td>
         <td>
            <div style="width:100%">
                <div id="myprogress"></div>
            </div>
         </td>
      </tr>
    </table>
1 голос
/ 21 февраля 2020

Сначала найдите все div в 4-й части таблицы 

 var divs = $("tr td:nth-child(4) div");

Выполните команду al oop, чтобы установить ширину div и получить значение из 3-й тд 

 for(var i=0;i<divs.length;i++) {
    $(divs[i]).css({'width': $(divs[i]).parent().prev('td').text() + '%'});
    }
...