<script> function goToLink(link) { window.location = link; } </script> <script> var rows = document.getElementsByTagName("tr"); var tuihuodanhao = '{{tuihuodanhao}}'; for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (row.cells[2].textContent === tuihuodanhao) { row.classList.add("selected"); } } </script> <table class="tab_1"> <tr> <td onclick="event.stopPropagation();"><input type="checkbox" id="select-all"></td> <td>录入时间</td> <td>退货单号</td> <td>录入人</td> <td>备注</td> <td>状态</td> <td>日志</td> </tr> {%for item in data%} <tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}');"> <td onclick="event.stopPropagation();"><input type="checkbox" value="{{item[1]}}" name="id"></td>已经有了css样式了为什么没有变化
时间: 2024-01-27 17:03:36 浏览: 25
如果已经添加了样式但是没有变化,可能有以下几个原因:
1. 样式定义的选择器不正确。请确认在 CSS 文件中 ".selected" 的选择器是否和 HTML 文件中对应的 class 名称相同。
2. 样式定义的优先级不正确。如果有其他选择器对该行的样式进行了定义,可能会覆盖 ".selected" 的样式定义。可以通过在样式定义中使用 !important 来提高优先级,例如:
```
.selected {
background-color: yellow !important;
}
```
3. 代码中的 tuihuodanhao 变量和 HTML 文件中的退货单号不匹配。请确认 tuihuodanhao 变量的值是否正确匹配到了需要选中的行。
希望以上提示能够帮助你找到问题所在。
相关问题
<tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}');"> <td id="cell1"><input type="checkbox" value="{{item[1]}}" name="id"></td> <script> function goToLink(link) { window.location = link; } </script> <script> var cell = document.getElementById("cell1"); cell.onclick = null; </script>错在哪里
这段代码存在一个逻辑错误,即在点击表格中的某一行时,会先执行 `goToLink` 函数跳转到对应的页面,然后再执行 `cell.onclick = null` 将该行的点击事件清空。这会导致无法再次点击该行,因为点击事件已经被清空了。正确的方式是将 `cell.onclick = null` 放在 `goToLink` 函数里面,即在跳转页面之前先清空点击事件,这样就可以正常点击了。修改后的代码如下所示:
```
<script>
function goToLink(link) {
var cell = document.getElementById("cell1");
cell.onclick = null;
window.location = link;
}
</script>
<table class="tab_1">
<tr>
<td><input type="checkbox" id="select-all"></td>
<td>录入时间</td>
<td>退货单号</td>
<td>录入人</td>
<td>备注</td>
<td>状态</td>
<td>日志</td>
</tr>
{%for item in data%}
<tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}');">
<td id="cell1"><input type="checkbox" value="{{item[1]}}" name="id"></td>
<td>{{item[0]}}</td>
<td><a href="/do_chawuliu2?danhao={{item[1]}}">{{item[1]}}</a></td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>{% if item[4] is none %}{% else %}{{item[4]}}{% endif %}</td>
<td>日志</td>
</tr>
{%endfor%}
</table>
```
<script> function goToLink(link) { window.location = link; } </script> <script> var rows = document.getElementsByTagName("tr"); var tuihuodanhao = '{{tuihuodanhao}}'; for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (row.cells[2].textContent === tuihuodanhao) { row.classList.add("selected"); } } </script> <table class="tab_1"> <tr> <td onclick="event.stopPropagation();"><input type="checkbox" id="select-all"></td> <td>录入时间</td> <td>退货单号</td> <td>录入人</td> <td>备注</td> <td>状态</td> <td>日志</td> </tr> {%for item in data%} <tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}');"> <td onclick="event.stopPropagation();"><input type="checkbox" value="{{item[1]}}" name="id"></td>为什么选中的行不变色
根据你提供的代码,可以看到当符合条件的行被找到后,会给这一行的 class 添加 "selected",但是在代码中并没有对 "selected" 这个 class 进行样式的定义。所以需要在 CSS 文件中添加 ".selected" 的样式定义,例如:
```
.selected {
background-color: yellow;
}
```
这样就可以让选中的行变成黄色背景了。当然,你也可以根据需要修改样式定义。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<input type="checkbox" id="select-all"> 录入时间 退货单号 录入人 备注 状态 日志 {%for item in data%} <input type="checkbox" value="{{item[1]}}" name="id"> {{item[0]}} {{item[1]}} {{item[2]}} {{item[3]}} {% if item[4] is none %}{% else %}{{item[4]}}{% endif %} 日志 {%endfor%} <script> function goToLink(link) { window.location = link; } </script> <script> var cell = document.getElementById("cell1"); cell.onclick = null; </script> cell1不起作用
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<script> function goToLink(link) { window.location = link; } </script> <input type="checkbox" id="select-all"> 录入时间 退货单号 录入人 备注 状态 日志 {%for item in data%} <input type="checkbox" value="{{item[1]}}" name="id"> {{item[0]}} {{item[1]}} {{item[2]}} {{item[3]}} {% if item[4] is none %}{% else %}{{item[4]}}{% endif %} 日志 {%endfor%} <script> var rows = document.getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) { var row = rows[i]; var tuihuodanhao = row.cells[1].innerHTML; if (tuihuodanhao === {{tuihuodanhao}}) { row.classList.add("selected"); } } </script> <script> function fun(ido,page){ var textDiv= document.getElementById(ido); var url="{{ url_for('shouhou.show_tui') }}?page="+page+"&keyword={% if keyword!=None %}{{keyword}}{% endif %}"; return textDiv.setAttribute("href",url); } </script>为什么行背景没有变色
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)