如何將垂直變化<tr>變爲水平<tr>

該代碼產生了2件事情。首先是單擊複選框時突出顯示錶格記錄。第二個是要記住結果甚至刷新頁面。如何將垂直變化<tr>變爲水平<tr>

<!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    </head> 

    <body> 
    <style> 
    .highlight-red { 
     background-color: red; 
    }  
    .highlight-green { 
     background-color: green; 
    } 
    .highlight-yellow { 
     background-color: yellow; 
    }  
    </style> 
    <div class="col-lg-10"> 
     <table id="Table" border="1" > 
      <tr class="highlight"> 
      <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td> 
      <td>Click me</td> 
      </tr> 
      <tr> 
      <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td> 
      <td>Click me</td> 
      </tr> 
      <tr> 
      <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td> 
      <td>Click me</td> 
      </tr> 
     </table> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script> 

     function changeSoma(data, color){ 
       if(data.checked && color == 'red'){ 
        $(data).parent().parent().addClass("highlight-red"); 
       } 
       else{ 
        $(data).parent().parent().removeClass("highlight-red"); 
       } 
       if(data.checked && color == 'green'){ 
        $(data).parent().parent().addClass("highlight-green"); 
       } 
       else{ 
        $(data).parent().parent().removeClass("highlight-green"); 
       } 
       if(data.checked && color == 'yellow'){ 
        $(data).parent().parent().addClass("highlight-yellow"); 
       } 
       else{ 
        $(data).parent().parent().removeClass("highlight-yellow"); 
       } 
     } 
    </script> 
    <script> 

     var cond = JSON.parse(localStorage.getItem("check")); 
     for(var i in cond) { 
      if(cond[i]) { 
      $("#"+i).attr("checked",true); 
      $("#"+i).parent().parent().addClass("highlight-"+cond[i]); 
      } 
     } 
     function changeSoma(data, color){ 
       var state; 
       if(localStorage.getItem("check") == null) { 
        state = {cb1:0,cb2:0,cb3:0}; 
       } else{ 
        state = JSON.parse(localStorage.getItem("check")); 
       } 

       if(data.checked) { 
        $(data).parent().parent().addClass("highlight-"+color); 
        state[data.id]= color; 
       } else { 
        $(data).parent().parent().removeClass("highlight-"+color); 
        state[data.id]= 0; 
       } 
       localStorage.setItem("check",JSON.stringify(state)); 
     } 
    </script> 
    </body> 
    </html>

但我需要三個複選框是水平的。當我刪除tr標籤時，只有一種顏色突出顯示所有三個複選框，其他兩種顏色不起作用。如下所示。我怎樣才能改變這個？任何人都可以解釋我的錯誤在哪裏？

來源

2017-07-28 Dushee

一個'' 6''？ – Weedoze

是的。一個表格行可以有許多表格數據。不是嗎？ – Dushee

對不起，我不太明白你想要做什麼。你的意思是你想要一樣的功能，但一切都在一行？ –

只是添加到您的tr標籤。無需刪除它。

style="display: inline-block;"

應該是這樣的

<tr style="display: inline-block;"> 
    <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td> 
    <td>Click me</td> 
</tr>

來源

2017-07-28 13:02:32

先生傑克Mov這是最酷的選擇。謝謝你soooooooo多 – Dushee

好的電話，從來沒有想到這一點。有時候，最簡單的解決方案是最好的，我猜haha –

Dushee，沒問題。 @ Weedoze提供了一個更短，更好的js代碼。 –

function changeSoma(data, color) { 
 
    if (data.checked) 
 
    $(data).parent().addClass(`highlight-${color}`); 
 
    else 
 
    $(data).parent().removeClass(`highlight-${color}`); 
 
}

.highlight-red { 
 
    background-color: red; 
 
} 
 

 
.highlight-green { 
 
    background-color: green; 
 
} 
 

 
.highlight-yellow { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-10"> 
 
    <table id="Table" border="1"> 
 
    <tr class="highlight"> 
 
     <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')"/></td> 
 
     <td>Click me</td> 
 
     <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td> 
 
     <td>Click me</td> 
 
     <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td> 
 
     <td>Click me</td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2017-07-28 12:55:09 Weedoze

謝謝Weedoze先生。 – Dushee

幾乎與上面相同，但目標文本td而不是複選框

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="col-lg-10"> 
    <table id="Table" border="1"> 
     <tr class="highlight"> 
      <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td> 
      <td class="red">Click me</td> 
      <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td> 
      <td class="green">Click me</td> 
      <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td> 
      <td class="yellow">Click me</td> 
     </tr> 
    </table> 
</div> 
<script> 
    function changeSoma(data, color) { 
     if (data.checked) 
      $("." + color + "").addClass(`highlight-${color}`); 
     else 
      $("." + color + "").removeClass(`highlight-${color}`); 
    } 
</script>

來源

2017-07-28 13:02:59

@Dushee如果你想突出顯示覆選框，只需將顏色類添加到'td' –

謝謝Mr.Braeden。 Stackoverflow社區真棒。今天我學到了很多可以去的地方。謝謝 – Dushee

你可以換你所有<td>元素連接成一個<tr>，所以他們都出現在一個單一的行。我還建議將您的文本包裝爲<label>，以便您可以識別<label>和相應的<input>，以便爲其父母<td>元素添加樣式。

HTML

<div class="col-lg-10"> 
    <table id="Table" border="1"> 
    <tr class="highlight"> 
     <td> 
      <input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /> 
     </td> 
     <td>Click me</td> 
    </tr> 
    <tr> 
     <td> 
     <input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /> 
     </td> 
     <td>Click me</td> 
    </tr> 
    <tr> 
     <td> 
     <input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /> 
     </td> 
     <td>Click me</td> 
    </tr> 
    </table> 
</div>

JS（只有你如果塊）

if (data.checked) { 
    $(data).parent().parent().addClass("highlight-" + color); 
    state[data.id] = color; 
    } else { 
    $(data).parent().parent().removeClass("highlight-" + color); 
    state[data.id] = 0; 
    } 
    localStorage.setItem("check", JSON.stringify(state)); 
}

Live demo

來源

2017-07-28 13:07:46 Aer0

謝謝Mr.Aer0，這個選項效果很好 – Dushee

如何將垂直變化<tr>變爲水平<tr>

回答

相關問題