html中的td上来加载之后我想给他一个事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中的td上来加载之后我想给他一个事件相关的知识，希望对你有一定的参考价值。
onload貌似不行各位路过的大侠有没有好的办法
可能没说很明白 是加载后触发一个js的事件
然后在JS中操作TD,前提给TD加ID和RUNAT
在后台Page_Load中加上上面的即可在页面加载的时候调用JS 参考技术C 下面的表格列出了 td 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。
onactivate 当对象设置为活动元素时触发。
onbeforeactivate 对象要被设置为当前元素前立即触发。
onbeforecopy 当选中区复制到系统剪贴板之前在源对象触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onblur 在对象失去输入焦点时触发。
onclick 在用户用鼠标左键单击对象时触发。
oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
oncopy 当用户复制对象或选中区，将其添加到系统剪贴板上时在源元素上触发。
oncut 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick 当用户双击对象时触发。
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
ondrag 当进行拖曳操作时在源对象上持续触发。
ondragend 当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart 当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onfilterchange 当可视滤镜更改状态或完成转换时触发。
onfocus 当对象获得焦点时触发。
onfocusin 当元素将要被设置为焦点之前触发。
onfocusout 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown 当用户按下键盘按键时触发。
onkeypress 当用户按下字面键时触发。
onkeyup 当用户释放键盘按键时触发。
onlosecapture 当对象失去鼠标捕捉时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseenter 当用户将鼠标指针移动到对象内时触发。
onmouseleave 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel 当鼠标滚轮按钮旋转时触发。
onmove 当对象移动时触发。
onmoveend 当对象停止移动时触发。
onmovestart 当对象开始移动时触发。
onpaste 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange 当在对象上发生对象上发生属性更改时触发。
onreadystatechange 当对象状态变更时触发。
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
onselectstart 对象将要被选中时触发。
ontimeerror 当特定时间错误发生时无条件触发，通常由将属性设置为无效值导致。本回答被提问者采纳
Javascript，循环使用单个td标记中的3个类
我使用简单的html和镶嵌js + css来创建一个简单的网站，只跟踪一个工人是否在工作（通过简单地点击一个带有他们名字的td），事情是我从未使用过js和一天之后阅读文档并查找stackoverflow和w3schools，我无法运行我的代码。我的问题是每当我尝试点击背景颜色没有改变时，当我得到一个解决方案时，整个表背景颜色改变了，但我想一次一个td，任何人都可以帮助我吗？到目前为止我得到了：
<script language=javascript type="text/javascript">
var el
function colCell() {
if (typeof event !== 'undefined')
el = event.srcElement;
elements = document.getElementsByTagName('td');
if (el.style.backgroundColor == "#E5F0F8")
{
el.style.backgroundColor = "#0066bb"
el.style.color ="#ffffff"
}
else if (el.style.backgroundColor == "#0066bb")
{
el.style.backgroundColor = "#ff00ff"
el.style.color = "#ffffff"
}
else
{
el.style.backgroundColor = "#E5F0F8"
el.style.color = "#000000"
}
}
if (window.addEventListener)
window.addEventListener('click', function(e) {
el = e.target
}, true)
</script>
有了这个表：
<div class="contentSection">
<table class="awht2">
<tr>
<td colspan="5" class="line">LCS</td>
</tr>
<tr>
<td onclick="colCell()" style="background-color: #E5F0F8;">
TestFarbe
</td>
考虑td和tr重复几次。
很抱歉这是noob'ish这是我的第一个项目与js和HTML
答案
这里和那里有一些改进：
<script language=javascript type="text/javascript">
var el
function colCell(el) {
elements = document.getElementsByTagName('td');
if (el.style["background-color"] == "rgb(229, 240, 248)")
{
el.style["background-color"] = "#0066bb"
el.style.color ="#ffffff"
}
else if (el.style["background-color"] == "rgb(0, 102, 187)")
{
el.style["background-color"] = "#ff00ff"
el.style.color = "#ffffff"
}
else
{
el.style["background-color"] = "#E5F0F8"
el.style.color = "#000000"
}
}
/*if (window.addEventListener)
window.addEventListener('click', function(e) {
el = e.target
}, true)*/
</script>
<div class="contentSection">
<table class="awht2">
<tr>
<td colspan="5" class="line">LCS</td>
</tr>
<tr>
<td onclick="colCell(this)" style="background-color: #E5F0F8;">
TestFarbe
</td>
<td onclick="colCell(this)" style="background-color: #E5F0F8;">
TestFarbe2
</td>
<td onclick="colCell(this)" style="background-color: #E5F0F8;">
TestFarbe3
</td>
<td onclick="colCell(this)" style="background-color: #E5F0F8;">
TestFarb4
</td>
<td onclick="colCell(this)" style="background-color: #E5F0F8;">
TestFarbe5
</td>
</tr>
</table>
</div>
你不需要有窗口事件，你可以将this传递给function。
另一答案
var cells = document.getElementsByTagName('td');
for(var i =0;i<cells.length;i++){
cells[i].addEventListener('click',function(e){
e.target.classList.toggle('gray');
e.target.classList.toggle('blue');
},false)
}td {
background-color: #E5F0F8;
color:#000000;
}
.blue{
background-color:#0066bb;
color:#ffffff;
}<div class="contentSection">
<table class="awht2">
<tr>
<td colspan="5" class="line">LCS</td>
</tr>
<tr>
<td>
TestFarbe
</td>
</tr>
</table>
</div>另一答案
使用colCell()传递事件对象。然后使用window.getComputedStyle获得当前的背景颜色。这将在rgb。将此rgb转换为hex，然后使用element.style.property，其中element是发起事件的目标，property是任何css属性
function colCell(e) {
let target = event.target;
// the background color will be in rgb . In that this snippet is
// considering only integers and replacing characters and
// special characters with empty string. Then using filter to
// get only the values which are not empty
let x = window.getComputedStyle(target).backgroundColor.replace(/[^0-9]/g, ' ').trim().split(' ').filter(e => e !== "");
let getHex = rgbToHex(+x[0], +x[1], +x[2]).toUpperCase()
if (getHex === "#E5F0F8") {
target.style.backgroundColor = "#0066bb"
target.style.color = "#ffffff"
} else if (el.style.backgroundColor === "#0066bb") {
target.style.backgroundColor = "#ff00ff"
target.style.color = "#ffffff"
} else {
target.style.backgroundColor = "#E5F0F8"
target.style.color = "#000000"
}
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(229) + componentToHex(240) + componentToHex(248);
}<div class="contentSection">
<table class="awht2">
<tr>
<td colspan="5" class="line">LCS</td>
</tr>
<tr>
<td onclick="colCell(event)" style="background-color: #E5F0F8;">
TestFarbe
</td>
</table>
</div>以上是关于html中的td上来加载之后我想给他一个事件的主要内容，如果未能解决你的问题，请参考以下文章
js动态加载的a标签的onclick事件参数传递，一直报Uncaught SyntaxError: Invalid or unexpected token