Question

我已经重写了这个问题，原因的部分解决了一个更简单的解决方案：

我有一个动态创建的表，其中可能有超过100个表单元格（），它们没有ID。单击表格单元格时会触发onclick事件并进行条件检查以确定它是第一次单击2次单击系列还是第二次单击。条件确定设置2个隐藏表单字段的值。

现在这里是我想要完成的简单部分：onclick，如果它是第一次点击我想要触发该功能的对象的背景颜色为color1否则如果是第二次点击那么它将是color2。

CSS

#test tr td {text-align:center; border: thin black solid;}

SCRIPT

<script>
var x = 0;
var click = 0;
function res(zz) {
if (click == 0) {document.getElementById('start').value=zz; click = 1;} else
{document.getElementById('end').value=zz; click = 0;}
}
</script>

HTML

<form action="" method="POST">
<input type="hidden" name="start" id="start" value="">
<input type="hidden" name="end"  id="end" value="">
<input name="submit" type="submit" value="submit" />    
</form>

 <div id="starget"></div>
    <div id="etarget"></div>

    <table width="100%" id="test">
            <thead>
            <tr>
            <th>Tech</th><th>0800</th><th>0900</th><th>1000</th><th>1100</th><th>1200</th>
            </tr>
        </thead>
        <tr>
<td>Bill</td>
<td>XXX</td>
<td onclick="res(0900);"></td>
<td>XXX</td>
<td>XXX</td>
<td onclick="res(1200);"></td>
</tr>
 </table>

如果我希望第一次点击和第二次点击之间的背景颜色相同，则此更改有效：

<td onclick="res(0900);this.style.backgroundColor='green';"></td>

但是这下面不起作用，因为调用对象（）没有将自身的引用（this.style ....）传递给函数，但实际上这是我需要它工作的方式，因为我需要它条件检查以确定将背景设置为什么颜色：

function res(zz) {
    if (click == 0) {document.getElementById('start').value=zz; click = 1;this.style.backgroundColor='green';} else {document.getElementById('end').value=zz; click = 0;this.style.backgroundColor='red';} }

Answer 1

您只需将'this'传递给函数res

即可

小提琴：

http://jsfiddle.net/sifriday/r3jaapj5/2/

HTML：

<td onclick="res(0900, this);"></td>

相应的JS调整：

function res(zz, el) {
    if (click == 0) {document.getElementById('starget').innerHTML=zz; click = 1; el.style.backgroundColor='green';} else {document.getElementById('etarget').innerHTML=zz; click = 0;}
}

在被调用的函数中使用对象引用（this）

1 个答案: