Блог

Главная - Вопросы по программированию - Как я могу собрать отображение строк таблицы == «нет»?

Как я могу собрать отображение строк таблицы == «нет»?

#javascript #html-table

Вопрос:

У меня есть строка таблицы display:table-row и display:none

Я хочу собрать значение tablerow == "display: table-row" и показать его только display:table-row в console.log

но мой код ничего не показывает, потому что не соответствует условию, если

есть ли у кого-нибудь советы по моему коду ?

 tr = document.getElementsByTagName('tr');

for (var i = 0; i < tr.length; i  ) {
    if (tr[i].style == "display:table-row") {
        console.log(tr[i])
    }
} 
 <table>
  <tr style = "display:none">
    <td>Human</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr style = "display:table-row">
    <td>Robot</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr style = "display:table-row">
    <td>Robot</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

Ответ №1:

tr[i].style возвращает объект. То, что вам нужно использовать, — это свойство отображения. Смотрите строку «если».

 tr = document.getElementsByTagName('tr');

for (var i = 0; i < tr.length; i  ) {
    if (tr[i].style.display == "table-row") {
        console.log(tr[i])
    }
} 
 <table>
  <tr style = "display:none">
    <td>Human</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr style = "display:table-row">
    <td>Robot</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr style = "display:table-row">
    <td>Robot</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

Ответ №2:

Вы очень близки к ответу. Ты промахнулся .display в if состоянии, и я использовал === вместо == этого .

 tr = document.getElementsByTagName('tr');

for (var i = 0; i < tr.length; i  ) {
    if (tr[i].style.display === "table-row") {
        console.log(tr[i])
    }
} 
 <table>
  <tr style = "display:none">
    <td>Human</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr style = "display:table-row">
    <td>Robot</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr style = "display:table-row">
    <td>Robot</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

Ответ №3:

 <script>
const rows = document.querySelectorAll("[style='display:table-row']")  
rows.forEach(row => {    
        console.log(row.getAttribute('style')) // display:table-row
})
</script>
Метки: