使用书签复选框触发onchange事件中铬只

<tr phrase_id="1" class="altRow"> 
    <td style="padding:3px; vertical-align:top;"><input type="checkbox" value="1"></td> 
    <td class="phraseCode" style="padding:3px; vertical-align:top;"> 
    EUH 201/201A 
    </td> 
    <td class="phraseText" style="padding:3px; vertical-align:top;"> 
    Contains lead. Should not be used on surfaces liable to be chewed or sucked by children. Warning! Contains lead. 
    </td> 
</tr>

上面的代码是从使用F12在chrome.In上面的代码的网页中提取有一个checkbox点击它时，打开整行yellow.So我做了一个书签将检查checkbox，但它不拍行yellow.here是我的书签使用书签复选框触发onchange事件中铬只

的Javascript

(function(){ 
    var s = document.getElementsByClassName("phraseCode"); 
    for (i=0;i<s.length;i++) { 
    if(s[i].innerText=="EUH 201/201A") { 
     elm=s[i].parentNode.getElementsByTagName("input")[0]; 
     elm.checked=true;break; 
    } 
    } 
})();

我使用elm.onchange()试过，但没有结果。我用typeof()得到了onchange事件的类型，它返回的是object而不是function，为什么呢？又如何触发相关的onchange事件。请用编码解释我。我是javascript新手。请帮忙。

来源

2014-11-06 Satya

尝试用elm.onclick()触发点击事件。完整书签代码（略优化）将变为：

(function() { 
    var s = document.querySelectorAll(".phraseCode"); 
    for (var i = 0; i < s.length; i++) { 
     if (s[i].innerText == "EUH 201/201A") { 
      var elm = s[i].parentNode.querySelector("input"); 
      elm.checked = true; 
      elm.onclick(); 
      break; 
     } 
    } 
})();

由于elm.onchange没有为你的工作的情况下，切换效果非常有可能设置了相应的复选框单击事件。另外如果你想知道为什么typeof elm.onchange是一个对象，这是因为没有onchange事件绑定，然后elm.onchange是null，其中typeof返回object。

如果使用addEventListener绑定事件，则可能需要创建一个事件并手动调度它，如本例中的http://jsfiddle.net/mx1o3579/。

来源

2014-11-06 05:30:14 dfsq

我试过'onclick（）'但它不工作 – Satya 2014-11-06 05:53:02

所以事件绑定addEventListener然后。在这种情况下，尝试使用代码触发事件发布的演示。 – dfsq 2014-11-06 05:54:43

非常感谢。你有了这个概念。那么如何使用bookmarklet实现相同的效果。我的意思是我想创建一个书签，它将务实地做同样的事情。 – Satya 2014-11-06 07:04:12

<table border="1"> 
<tr class="altRow"> 
    <td style="padding:3px; vertical-align:top;"> 
    <input type="checkbox" value="1" class="chbox"></td> 

    <td class="phraseCode" style="padding:3px; vertical-align:top;">EUH 201/201A</td> 

     <td class="phraseText" style="padding:3px; vertical-align:top;">Contains lead. Should not be used on surfaces liable to be chewed or sucked by children. Warning! Contains lead.</td> 
</tr> 
</table> 

<style> 
.selected 
{ 

background-color:yellow; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(".altRow").click(function() 
{ 
    alert('ddd'); 
    $(this).addClass('selected'); 
}); 
</script>

来源

2014-11-06 05:06:33 kki3908050

您可以使用此代码：

<style> 
.selected 
{ 
    background-color:yellow; 
} 
</style> 

<script src="http://code.jquery.com/jquery-2.0.2.js"></script> 

<script> 
$(".chbox").click(function() 
{ 
    $(".altRow").toggleClass('selected'); 
}); 
</script>

来源

2014-11-06 05:15:08 kupendra

在当前的代码，控制不进入for循环。如果您打印变量's'的长度，它是0. 我建议您使用'getElementById'。

来源

2014-11-06 05:20:53

如果你可以使用jQuery然后看看.trigger（）文档是here。用jquery你可以触发这样的事件

$('.some_class').trigger('click');

希望它有帮助。

来源

2014-11-06 05:26:38 Aameer

你可以尝试用普通本工作小提琴的JavaScript
http://jsfiddle.net/mrk_m/jvhogyna/3/
它元素注册事件处理程序。
// create inbuilt event var event = new MouseEvent('click', { 'view': window, 'bubbles': true, 'cancelable': true }) // In loop register handler to change color. and then simulate event for (i = 0; i < s.length; i++) { console.log(s[i]); if (s[i].innerHTML == "EUH 201/201A") { elm = s[i].parentNode.getElementsByTagName("input")[0]; elm.onchange = changeBgColor; // dispatch click event elm.dispatchEvent(event); break; } } // Handler that changes color of entire row function changeBgColor (e) { if (!e.target.checked) { rowEle.style.backgroundColor = 'white'; } else { rowEle.style.backgroundColor = 'yellow'; } e.preventDefault(); e.stopPropagation(); }
您可以从js或css为altRow设置背景颜色。如果你想使用CSS，仍然需要在事件处理程序中为js修改一些类。另外，你必须在里面包装才能执行循环。

来源

2014-11-06 05:52:07

使用书签复选框触发onchange事件中铬只

回答

相关问题