Срабатывание флажок OnChange событие в хроме, используя букмарклет только

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> 

Приведенный выше код извлекается из веб-страницы с помощью клавиши F12 в chrome.In выше код есть checkbox, который при нажатии на переворачивает всю строку yellow.So я сделал букмарклет, который будет проверять, что checkbox, но это не делает yellow.here линии мой букмарклет

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.So, пожалуйста, помогите.

Answer 1

Попробуйте вызвать событие click с 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 2

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

Вы можете использовать этот код:

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

В текущем коде управления не входя в для цикла. Если вы печатаете длину переменной 's', это 0. Предлагаю вам использовать 'getElementById'.

Answer 5

если вы можете использовать jquery, то посмотрите .trigger() docs: here. С помощью jquery вы можете вызвать событие, подобное этому

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

Надеюсь, что это поможет.

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(); }
Вы можете установить цвет фона для altRow из js или из css. Если вы хотите использовать css, вам нужно изменить некоторый класс для js в обработчике событий. Кроме того, вы должны обернуть внутри, чтобы выполнить цикл for.