Question

<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>

以上代码是使用chrome中的F12从网页中提取的。在上面的代码中有一个checkbox，当点击时将整行变成黄色。所以我制作了一个书签，它将检查{{1但是它没有使线条变黄。这是我的书签

的Javascript

checkbox

我尝试使用(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事件。请用编码解释我。我是javascript的新手。所以请帮忙。

Answer 1

<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>

Answer 2

您可以使用此代码：

<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>

Answer 3

在当前代码中，控件未进入for循环。如果打印变量's'的长度，则为0。我建议你使用'getElementById'。

Answer 4

如果你可以使用jquery，那么看看.trigger（）docs是here。使用jquery，您可以触发此类事件

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

希望它有所帮助。

Answer 5

尝试使用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/中一样。

Answer 6

你可以试试这个工作小提琴用普通的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改变一些类。此外，你必须包装内部才能执行循环。

仅使用书签触发Chrome中的复选框onchange事件

6 个答案: