如何阻止我的 Javascript 代码弄乱我的预定义 CSS styles？

Question

I am building a mini-email platform. It is a mockup and not exactly a full application. I have some dummy emails in the HTML file which I have styled. I added an input bar and then used javascript to display emails that correspond with the value in the search bar. My code works but it messes up the CSS styles I have set and the displayed values are scattered around.

How can I make sure that my Javascript code adheres to my predefined CSS styles?

HTML

 <section id="email">
    <div class = "date-container">
      <div class = "calendar-container">
        <img src="./assets/icon_calender.svg" alt="">
        <div>
          <span>2019/12/31 - 2020/1/3</span>
        </div>  
      </div>
      <div>
        <img src="./assets/icon_search.svg" alt="">
      </div>
    </div>
    <div class = "text-container email">
      <h1>Results: <span>10</span>mail(s)</h1>
      <input class="search-email" type="text" placeholder="search">
    </div>
    <div class = "email-table">
       <table>
         <tr>
           <th>From <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
           <th>To</th>
           <th>Subject</th>
           <th class="date">Date <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
         </tr>
         <tr class="email-body">
           
           <td>aaa@example.com</td>
           <td class="second-data first-second-data">zzz.zzz@example.com</td>
           <td class="third-data first-third-data">[ HR-888 ] Notice of official announcement</td>
           <td>0:20</td>
         </tr>
         <tr class="email-body">
          <td>bbb.bbbb@exam... </td>
          <td class="second-data second-second-data">yyy@example.com</td>
          <td class="third-data second-third-data">[web:333] "Web Contact"</td>
          <td>0:10</td>
        </tr>
        <tr class="email-body">
          <td>ccc@example.com </td>
          <td class="second-data third-second-data">
            <div class="text-attachment">
              <span>xxx@example.com, ...</span>
              <span>+1</span>
            </div>
             </td>
          <td class="third-data third-third-data">Happy New Year! Greetings for the New Year.</td>
          <td>
            <div class="attachment first-clip">
              <span><img src="./assets/icon_clip.svg" alt=""></span> 
              <span>0:00</span>
              </div>
            </td>
        </tr>
        <tr class="email-body">
          <td>ddd.dddd@exam...</td>
          <td class="second-data fourth-second-data">
            <div class="text-attachment second-text">
              <span>vvv.vvv@example.com, ... </span>
              <span>+1</span>
            </div>
          </td>
          <td class="third-data fourth-third-data">[HR-887(Revised: Office Expansion Project Team)] Notice of off... </td>
          <td>Jan 01</td>
        </tr>
        <tr class="email-body">

          <td>eee@example.com</td>
          <td class="second-data fifth-second-data">
            <div class="text-attachment last-attachment">
              <span>sss@example.com, .... </span>
              <span>+2</span>
            </div>
          </td>
          <td class="third-data fifth-third-data">[Github] Logout page</td>
          <td>Jan 01</td>
        </tr>
        <tr class="email-body">
          <td>fff.ffff@example.c... </td>
          <td>qqq.qqq@example.com</td>
          <td>［dev］ Postfix 3.1.12 / 3.2.9 / 3.3.4 / 3.4.5</td>
          <td>Jan 01</td>
        </tr>
        <tr class="email-body">
          <td>ggg@example.com </td>
          <td>ppp@example.com</td>
          <td>Re: [Github] Brush-up on loading animation </td>
          <td>Jan 01</td>
        </tr>
        <tr class="email-body">
          <td>hhh.hhh@examp...</td>
          <td>ooo.ooo@example.com</td>
          <td>Workplace Summary for sample, Inc.: Jun 2 - Jun 9</td>
          <td>
            <div class="attachment">
          <span><img src="./assets/icon_clip.svg" alt=""></span> 
          <span>Jan 01</span>
            </div>
          </td>
        </tr>
        <tr class="email-body">
          <td>iii@example.com</td>
          <td>nnn@example.com</td>
          <td>I love you</td>
          <td>
            <div class="attachment last-clip">
              <span><img src="./assets/icon_clip.svg" alt=""></span> 
              <span>2019/12/31</span>
              </div>
          </td>
        </tr>
        <tr class="email-body">
          <td>Pablo-Diego-...</td>
          <td>Pablo-Diego-José-Francisc...
          </td>
          <td>[info:888] ABC EQUIPMENT COMPANY</td>
          <td>2019/12/31</td>
        </tr>
       </table>
    </div>
  </section>

CSS

.email{
   display: flex;
   justify-content: space-between;
}
.email input[type= "text"]{
  border: 0;
  height: 30px;
  transform: translateY(10px);
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
}
.text-container h1{
  color: #5E5D5D;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
}
.text-container h1>span{
  font-size: 1.7rem;
  padding-right: 3px;
}
.text-container hr{
  border-top: 1px solid #E0DEDE;
}

.image-container img{
  margin: 150px auto 0px auto;
  display: block;
  
}
#email{
  width: 100vw;
  height: 100vh;
}
.email-table{
  width: 90%;
  margin: 0px 40px 5px 0px;
}
.email-table table{
  margin-left: 40px;
  font-family: 'Roboto', sans-serif;
  border-collapse: collapse;
  width: 100%;
}
th:first-of-type>span img{
  display: none;
}
td, th {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
td{
  font-size: 1.2rem;
}

td:last-of-type{
  font-weight: 700;
}
.attachment{
  display: flex;
  justify-content: center;
  width: 20%;
  align-items: center;
  
  
}

.first-clip span:last-of-type{
  margin-right: 20px;
}

.last-clip{
  margin-left: 25px;
}
.attachment span:last-of-type{
  flex-shrink: 0;
}
.attachment span:first-of-type img{
  width: 20px;
  height: 20px;
}
.text-attachment{
  display: flex;
  justify-content: space-around;
}
.text-attachment span:first-of-type{
  transform: translateX(-18px);
}
.second-text{
  transform: translateX(5px);
}

.text-attachment span:last-of-type{
  border: 1px solid #ccc;
  background-color: #5E5D5D;
  color: white;
  border-radius: 5px;
  padding: 0px 5px;
}
.second-text span:last-of-type{
  transform: translateX(-10px);
}
td  img{
  width: 20px;
  height: 20px;
  transform: translateX(-30px);
}

th{
  background-color: #EEEDED;
  border-top: 3px solid #dddddd;
  border-bottom: 3px solid #dddddd;
}
th:not(:last-child){
  color: #5E5D5D;
}
.date>span img{
  height: 10px;
  width: 10px;
  padding-left: 3px;
}
tr:not(:first-of-type):hover{
  cursor: pointer;
  color: blue;
  background-color: #EEEDED;
}
tr td:last-of-type>span img{
  width: 10px;
  height: 10px;
  transform: translateX(90px);
  display: none;
}
.first-clip span:last-of-type>span img{
  width: 10px;
  height: 10px;
  transform: translateX(90px);
  display: none;
}

Javascript

const searchEmail = document.querySelector('.search-email');

searchEmail.addEventListener('keyup', filterEmail);

function filterEmail (e){
  const emailText = e.target.value.toLowerCase();
  document.querySelectorAll('.email-body').forEach((email) =>{
    const emailItem = email.innerHTML;
    if(emailItem.toLowerCase().indexOf(emailText) != -1){
      email.style.display ='block'
    }else{
      email.style.display ='none'
    }
  })
  

}

Answer 1

After running your code I see that there is a problem with your Javascript displaying all the results in one table column. That is caused by the if statement displaying everything as a block. So to fix your problem you just need to change your logic:

Javascript

const searchEmail = document.querySelector('.search-email');

searchEmail.addEventListener('keyup', filterEmail);

function filterEmail (e){
  const emailText = e.target.value.toLowerCase();
  document.querySelectorAll('.email-body').forEach((email) =>{
    const emailItem = email.innerHTML;
    if(emailItem.toLowerCase().indexOf(emailText) == -1)
    {
      email.style.display ='none'
    }
    else 
    {
      email.style.display =''
    }
  })
}

Answer 2

Just set your email.style.display ='block' to email.style.display ='' .

Also you might want to consider settings your table width and td widths to percentages so that your table columns stays the same all the time, not depending on content.