如何改变bootstrap内置的table tr的颜色

如何改变bootstrap内置的table tr的颜色,第1张

通过改变文件的加载顺序可以覆盖掉bootstrap的默认样式,先加载bootstrap再加载自己的样式或者一个页面中有两个table,我想设置table1的tr的背景色是yellow。而table1中的不设置。下面的代码会将两个table的tr全部设置,如下,如何修改只设置tab。可以下载一个supertable的JS-jquery组件看看.

原理是把一个table拆成四个div,简单说就是把滚动的部分悬停固定部分之上.

比如克隆一个表头出来(DIV),然后设置全表的那个DIV上移一个表头高度,这样滚动表体而表头不动,改变按钮的颜色,只需要在该按钮的class属性里面添加如下几种类即可: btn-primary 深蓝色 btn-info 浅蓝色 btn-success 绿色 btn-default 白色 btn-warning 黄色 btn-danger 红色 如果您问的是在 *** 作过程中改变颜色,只需在javascript代码中访问到需要改变颜色的按钮,动态修改以上的几种类即可。应该是被其他的背景覆盖了。

我们一般不支持给tr设置背景,很容易被td的背景覆盖,而且td不会继承tr的背景色,只有td的背景是透明的情况下,才会看到tr的背景色。

曾经做过测试发现,如果将一张图片设置为tr的背景(未平铺只显示一张,靠左),实际显示却是每个td中都有一张背景图,你这个tr里面怎么没有td啊,没有td是不起作用的。 tr里面放内容浏览器是不能正常解析的。 因为根本就不符合html代码规范。 你在里面加td,然后在定义个宽度,那段样式自然就生效了。

代码如下:

<script>

  //js放到table下,才能检测到tr数组

  var trs = document.getElementById("tableBox").getElementsByTagName("tr")

 var trs=document.getElementById("tableBox").getElementsByTagName("tr")

     $(function(){

         for(var i=0i<trs.lengthi++){

             trs[i].onmousedown = function(){

                 mousedownclick(this)

             }

         }

     })

     function mousedownclick(obj){

         for(var j=0j<trs.lengthj++){

             if(trs[j]==obj){

                 trs[j].style.background='blue'

             }else{

                 trs[j].style.background=''

             }

         }

     }

</script>

扩展资料

js *** 作table的各种用法:

(1)得到table 中tbody 的内容 :$('#simple-table').find('tbody').html()

(2)点击td时,获取点击的行号

$('#simple-table tbody').on( 'click', 'td', function (e) {

normalRowIndex = $(this).parent().index()//行号

console.log("正常工作表行:"+normalRowIndex)

})

(3)为table追加一行:

function addNormalTR(){

$('#simple-table').find('tbody').append(trtd)//tdtd为拼接的trtd 的html内容。

}

(4) 点击td中的元素获取,当前行号: obj.parentNode.parentNode.rowIndex//obj 为元素对象

有个1个table,里面有11个tr,

除了第一个tr里是只有一个td (一个 button , onclick = "erase()")

剩下的tr中都是10个td,

每当按下erase的时候,要将非第一个tr中的所有cell背景设置成白色。

请问如何写erase() 这个方法


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11064176.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-13
下一篇 2023-05-13

发表评论

登录后才能评论

评论列表(0条)

保存