点击表格的单元格时实现变颜色

<title>无标题文档</title>

<script type="text/javascript" language="javascript">

//清空

function backs(){

var td= document.getElementsByTagName("td");

for(var i=0;i<td.length;i++){

td[i].style.backgroundColor="";   }

}

//浏览器加载时,先把表格的事件先加载好,点击表格时触发

function selectTable(){

var td=document.getElementsByTagName("td");

for(var i=0;i<td.length;i++){

td[i].onclick = function()    {

backs();

this.style.background = ‘red‘;

};

}

}

window.onload=selectTable;

</script>

</head>

<body>

<table width="200" border="1">

<tr>

<td>商品名称</td>

<td>数量</td>

<td>价格</td>

<td>合计</td>

</tr>

<tr>

<td onclick="changeBackgound(this)">手机</td>

<td onclick="changeBackgound(this)">1</td>

<td onclick="changeBackgound(this)">888</td>

<td onclick="changeBackgound(this)">888</td>

</tr>

<tr>

<td>手表</td>

<td>1</td>

<td>999</td>

<td>999</td>

</tr>

</table>

</body>

点击表格的单元格时实现变颜色

时间: 2024-08-24 03:32:21

点击表格的单元格时实现变颜色的相关文章

JavaScript提高:004:JS获取Gridview单元格时层级问题

使用javascript获取页面中元素的属性,或者对元素进行操作.这种使用是非常多的.不过对于获取那些在页面中单一的元素,诸如,页面上的某个文本框,下拉列表,按钮等可以直接用ID获取到的这种元素,用法自然简单.这里就不多说了,太简单了.一般比较复杂的是,获取元素中的元素,比如动态生成的那些元素.这里就拿表格中的元素为例吧.知道如何获取表格中的单元格内的元素了,其他的复杂元素也就不在话下了.下面举个简单的例子,获取GridView的单元格元素.平常使用比较多的也就是这种的.行中有个操作按钮,然后对

EXCEL在改动某几个单元格时隐藏空列

概述 今天我哥来找我帮他搞下excel表格,本着程序猿对程序无所不能的精神,我爽快的答应了.结果查了半天才搞定.现在记录在此,供自己以后参考,相信对其他人也有用. PS:这几天正在弄博客,马上就要弄完啦,弄完就把这些手记搬到博客上面啦! 说明 EXCEL的条件格式不能改变单元格的高宽,不能删掉单元格,不能隐藏单元格. 要实现这些功能需要用VBA编写宏,其中用到了EXCEL的Change事件. EXCEL的Change事件是当改变单元格时自动运行的,不需要绑定按钮. 用法 右键点击工作表的标签,然

LVC函数重要参数 EDT_CLL_CB:退出可编辑单元格时回调

6. I_GRID_SETTINGS 参数属性该参数用于设置Grid相关参数(打印.单元格回调):类型为:LVC_S_GLAY,该结构包括:01) COLL_TOP_P:最小化 TOP_OF_PAGE02) COLL_END_L:最小化 END_OF_LIST03) TOP_P_ONLY:仅打印TOP_OF_PAGE04) EOL_P_ONLY:仅打印END_OF_LIST05) NO_COLWOPT:不优化打印的列宽***************************************

ExtJS4.2 Grid知识点三:改变表格Grid单元格背景颜色

在ExtJS4.2 Grid知识点一:改变表格Grid单元格文字颜色一文中讲解了如何改变单元格中文字颜色,接下来在本章学习如何改变Grid中单元格的背景颜色,显示结果如图片: 在线演示  /  示例代码 实现方式同样是为Grid中该列自定义renderer函数,查询ExtJS 4.2 API得知,Ext.grid.column.Column的renderer属性可以是一个函数也可以是字符串,这个知识点是通过函数来实现的.函数参数列表如下: value : 当前待渲染的单元格值,即表格中某行某列的

border-collapse:collapse;清除表格中单元格的空隙

border-collapse:collapse;清除表格中单元格的空隙

C# winform datagridview 内嵌控件值改变后立即触发事件,而不需要离开该单元格时才触发,此时需要用到dgv_CurrentCellDirtyStateChanged事件

以下是参考代码 //datagridview内嵌控件值修改事件 private void dgv_CurrentCellDirtyStateChanged(object sender, EventArgs e) { if (dgv.IsCurrentCellDirty) { dgv.CurrentCellDirtyStateChanged -= dgv_CurrentCellDirtyStateChanged; dgv.CommitEdit(DataGridViewDataErrorContex

【web开发】☆★之利用POI操作Excel表格系列教程【10】单元格填充色和颜色操作

[web开发]☆★之利用POI操作Excel表格系列教程[10]单元格填充色和颜色操作 package csg.xiaoye.poidemo; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellStyle; import

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:为所有表格的单元格添加边框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet

EasyUi datagrid(onClickCell:用户单击一个单元格时触发 ) 單擊編輯 editor:{type: &#39;combobox&#39;}

1.columns列[一個單元格] 添加combobox下拉選項 $("#userGrid").datagrid({ singleSelect: true,            onClickCell: function (index, field, value) {                //Field = field;                //                var rows = $('#' + UserGrid).datagrid('getRo