内有复选框的表

x6h2sr28 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(354)

关闭。这个问题需要更加关注。它目前不接受答案。
**想改进这个问题吗？**编辑这篇文章，更新这个问题，使它只关注一个问题。

两天前关门了。
改进这个问题
我正在尝试复制或执行类似的操作：[1]：https://i.stack.imgur.com/a0yxb.jpg
基本上是一个内部带有复选框的表，当您选中复选框时，它会改变颜色（而不是通常的蓝色勾号）。我的html表体如下所示（在django btw中）：

<tbody>
    {% for partido in partidos_y_horarios.itertuples %}
    <tr>
    <td>{{ partido.0 }}
        <br>
        <small class="form-text text-muted">{{ partido.1 } 
        </small>
    </td>
    <td>
        <label><input type="checkbox" name="partido_{{forloop.counter}}_1" value="1"></label>
        <label><input type="checkbox" name="partido_{{forloop.counter}}_X" value="X"></label>
        <label><input type="checkbox" name="partido_{{forloop.counter}}_2" value="2"></label>
    </td>
</tr>
{% endfor %}
</tbody>

我是网页设计新手，所以非常感谢任何帮助/提示！

来源：https://stackoverflow.com/questions/68515103/table-with-checkboxes-inside

1条答案

按热度按时间

nmpmafwu1#

这是一把可能对你有帮助的小提琴。如果您想对默认元素（比如checkbox）做一些特殊的操作，我建议您不要这样做。从零开始构建一些东西，并尝试用自己的方式解决它。
html

<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<table>
  <tr>
    <th>Name</th>
    <th>CB1</th>
    <th>CB2</th>
  </tr>
  <tr>
    <td>Test</td>
    <td><div value="0" class="checkbox"></div></td>
    <td><div value="1" class="checkbox"></div></td>
  </tr>
</table>

js

$(document).ready(function(){
    $(".checkbox").click(function(){
    setNextValue(this, $(this).attr("value"))
  })

  function setNextValue(element, curr_val)
  {
    curr_val = parseInt(curr_val);
    switch(curr_val)
    {
        case 0: $(element).attr("value", 1); break;
        case 1: $(element).attr("value", 0); break;
    }
  }

})
css

.checkbox {
  width: 20px;
  height: 20px;
  background-color: red;
  cursor: pointer;
}

.checkbox:after {
  margin-left: .35rem;
  color: white;
}

.checkbox[value='0'] { background-color: red; }
.checkbox[value='1'] { background-color: blue; }
.checkbox[value='0']:after { content: "x"; }
.checkbox[value='1']:after{ content: "1"; }

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

赞(0）回复(0）举报 2021-09-13

我来回答

内有复选框的表

1条答案

相关问题

热门标签

最新问答