Question

这段代码可以做两件事。第一个是在单击复选框时突出显示表记录。第二个是记住页面刷新后的结果。

   <!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标签时，只有一种颜色突出显示所有三个复选框，其他2种颜色不起作用。如下所示。我怎么能改变这个？任何人都可以解释我的错误在哪里？

Answer 1

只需将其添加到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>

Answer 2

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>

Answer 3

与上述几乎相同，但定位文字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>

Answer 4

您可以将所有<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块）

  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

如何将垂直变为水平

4 个答案: