JS如何设置表格行样式?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS如何设置表格行样式?相关的知识,希望对你有一定的参考价值。

document.getElementById('GridView1').rows[rowid].style.setAttribute("font-weight","normal");这段代码不报错也没有生效,如何改呢?alert(rowid)是正确rowIndex.

用js获取表格元素,行元素tr或者列元素td,进行css样式设置即可;

<table><tr><td></td></tr></table>
<script type="text/javascript" scr="jquery.js">
    
    $('tr').css('border','solid 1px purple');
    $('td').css('border-collapse','collapse');
    $('td').css('padding','10px');

</script>
//以上方法是jquery方式实现获得和样式修改
//其中css和attr中参数可变,一个参数时意为获取,两个参数为设置;
//设置样式也可给元素添加属性用attr
//或者addClass都可以,添加class属性等

参考技术A row .style.backgroundColor="#FFFFFF" ;//设置行的背景色
td=row .insertCell(); //添加单元格
td.style.cssText="BORDER-BOTTOM: #4a75ce 1px solid";
//设置单元格的样式
td.innerhtml="<input name=button type=button />";
//添加td中的内容
希望这段代码对你有帮助
参考技术B document.getElementById('GridView1').rows[rowid]...
GridView1是无效的,生成为客户端控件之后就会转化成表格,这时候ID会变掉的。
用document.getElementById(<%=GridView1.ClientID%>').。。。试试。
如果不行就先运行,然后右键查看页面源代码,找到GV到底生成了神马ID...

参考资料:范德萨

参考技术C document.getElementById('GridView1').rows[rowid].style.fontWeight="normal";本回答被提问者采纳 参考技术D document.getElementById('GridView1').rows[rowid].style.fontWeight="normal";

如何在 v-for 循环期间有条件地更改表格行样式?

【中文标题】如何在 v-for 循环期间有条件地更改表格行样式?【英文标题】:How to conditionally change table row style during a v-for loop? 【发布时间】:2019-04-07 05:00:35 【问题描述】:

我正在尝试在 v-for 循环中更改表格行的背景颜色,当 global.globalGroupLevel 为 0 并且如果它不是 0 则将其更改回来。我知道我可以复制表格行并使用 v-if 和 v-else,但这看起来很乱。我想过在 tr 元素上使用三元运算符来更改样式,但不确定这是否可行,如果可行,那么我不知道如何。

我目前的部分代码是这样的

<tbody>
    <template v-for="global in orderItems">
        <tr>
            ... Bunch of code
        </tr>
    </template>
</tbody>

如前所述,我可以用这个...

<tbody>
    <template v-for="global in orderItems">
        <tr v-if="global.globalGroupLevel == 0" style='background: #ccc'>
            ... Bunch of code
        </tr>

        <tr v-else="global.globalGroupLevel != 0" style='background: white'>
            ... Bunch of code
        </tr>

    </template>
</tbody>

但这很麻烦,而且对于更改 tr 背景颜色来说意义重大。

我是否有更好的选择来做我需要做的事情?

【问题讨论】:

【参考方案1】:

您可以使用带有类的解决方案,就像在另一个答案中提到的那样,或者使用您正在寻找的 :style

:style=" background: global.globalGroupLevel == 0 ? '#ccc' : 'white' "

【讨论】:

【参考方案2】:

创建两个名为whitebggraybg的类,并使用类绑定如下:

  <tr v-bind:class=" global.globalGroupLevel == 0? 'graybg' : 'whitebg'"></tr>

CSS 规则:

 .whitebg
    background:white
    
 .graybg
    background:#ccc
 

【讨论】:

【参考方案3】:

作为最佳实践,我总是尽量避免使用内联样式,并将 CSS 保留在其专用标签中。

所以你可以添加一个类:

<tr :class="['gray-group',  'white-group': global.globalGroupLevel ]"></tr>

还有css:

tr.gray-group 
  background: #ccc;

tr.white-group 
  background: white;

这里还有一个工作示例:js fiddle

【讨论】:

以上是关于JS如何设置表格行样式?的主要内容,如果未能解决你的问题,请参考以下文章

JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

如何为表格中的一行设置样式?

miniui如何设置样式

Excel设置表格样式的显示效果使用excel如何改变表格样式

怎么设置css表格的样式(颜色等)

js设置奇偶行数样式