CSS 与 原生js对样式的一些操作

1.点击Table中的任意一个td选中当前tr

• 通过vue循环赋值table

<table class="table border modal-body" id="respondentTable">
  <thead>
    <tr>
      <th></th>
      <th>{{ $t("appointment.Respondent_RealName") }}</th>
      <th>{{ $t("appointment.Respondent_Position") }}</th>
      <th>{{ $t("appointment.Respondent_Tel") }}</th>
      <th>{{ $t("appointment.Respondent_Email") }}</th>  
     </tr>
   </thead>
   <tbody>
      <tr v-for="(item, index) in respondentList" :key="index">
          <td>
            <input name="respondentInput"
                   :value="item.RealName"
                    type="checkbox"
                    @click="click_check_respondent(index, item)"
              />
           </td>
           <td @click="click_check_respondent(index, item)">{{ item.RealName }}</td>
           <td @click="click_check_respondent(index, item)">{{ item.position }}</td>
           <td @click="click_check_respondent(index, item)">{{ item.Tel }}</td>
           <td @click="click_check_respondent(index, item)">{{ item.email }}</td>
       </tr>
   </tbody>
</table>

• Table中点击任意一个 td 就可以获取当前 tr 

        - 对每一个 td 都加上点击事件

//index：list的下标；item：当前点击获得一行的对象数据
click_check_respondent(index, item) {//选择区域
      var that = this;
      document.getElementById("respondentTable").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[index].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = true;
      if (document.getElementById("respondentTable").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[index].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked) {
        //选中操作，第一次进来必须是选中
      } else {
        //可以不写
      }
      that.respondentList.forEach((item) => {
        //可以对list进行操作
      });
      //控制单选，每次只能选择一个
      var respondent_checkbox = document.getElementsByName('respondentInput')
      for(var i = 0;i < respondent_checkbox.length;i++){ 
        respondent_checkbox[i].checked = false;
      } 
      if(document.getElementById("respondentTable").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[index].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked == true){
        document.getElementById("respondentTable").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[index].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = false;
      }else{
        document.getElementById("respondentTable").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[index].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = true;
    }
}

 其中                   document.getElementById("respondentTable").getElementsByTagName("tbody")[0].getElementsByTagName("tr")[index].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked

是当前 td 中 input 的checked勾选状态

• 改变默认的checkbox选中颜色

input[type=checkbox]{
     cursor: pointer;
     position: relative;
     width: 15px;
     height: 15px;
     font-size: 14px;
}

input[type=checkbox]::after{
     position: absolute;
     top: 0;
     color: #000;
     width: 15px;
     height: 15px;
     display: inline-block;
     visibility: visible;
     text-align: center;
     content: ' ';
}
        
input[type=checkbox]:checked::after{
    background-color: #ee7916;
    content: "✓";
    font-size: 12px;
    font-weight: bold;
    color: white;
}

 

 

 

---

2.  改变默认Radio 的颜色

<div class="radio">
    <label class="typelabel">
        <input name="feel" type="radio" value= "V"/>
        <span class="pos">
            <span class="radio_bg">
               <span class="radio_on"></span>
            </span>
              </span>
        <span>V</span>
     </label>
     <label class="typelabel">
        <input name="feel" type="radio" value= "C"/>
          <span class="pos">
              <span class="radio_bg">
                  <span class="radio_on"></span>
              </span>
           </span>
         <span>C</span>
       </label>
   </div>

.radio {
  color: white;
}    
.typelabel{
  margin-right: 40px;
}
label input, .radio_on {
  display: none;
}           
.pos {
  display: inline;
  vertical-align: middle;
}       
.radio_bg {
  position: relative;
  display: inline-block;
  height: 14px;
  width: 14px;
  border: 1px solid #B3B4B8;
  border-radius: 50%;
}       

label:hover .radio_bg, label input:checked + span.pos span.radio_bg {
  border: 1px solid #ee7916;
}       

label input:checked + span.pos span.radio_bg .radio_on {
  display: inline-block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ee7916;
} 

 

---