使用書籤複選框觸發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事件中鉻只

回答

相關問題