現在のHTML
==================
<tr><td>
<div><a class="title" title="HOGE">HOGE</a></div>
</td>
<td>カテゴリA</td>
<td>
<input checked="checked" value="1" name="12345_flag" type="radio"><label>ON</label>
<input value="0" name="12345_flag" type="radio"><label>OFF</label>
</td>
</tr>
==================
このような ON OFF radioボタンが 30個くらい並んでおり、
カテゴリAと書いている部分が、AからCぐらいまであり、
たとえば、「カテゴリB」だけ ON になるボタン というものを
Greasemonkey を使って実装したいと考えています。
やり方の方針としましては、
どうにかして カテゴリA の部分のテキストを解析し、
それに対応する input radio に class="カテゴリA" とかの要素を追加し、
class="カテゴリA" を一斉に ON OFF する Javascriptボタンを最後に付け加える。
こんな流れかと思いますが、そもそもカテゴリAの部分を取得できるのかどうか。
id や class がついていないため、どうなのかと。
そもそも実現可能か、可能であれば、どこを調べればよいか。
ご教授願いします。
No.1
1504
493
60pt
カテゴリ名を自動で取得して、それぞれをONにするボタンを追加するデモを書いてみました。
多分そのままグリモンにすれば動くと思います。
demo: http://jsfiddle.net/L6Rmp/
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script> onload = function() { // radiobox生成（質問に関係ない） var tr = document.querySelector('tr'); for(var i=0; i<9; i++) { var tr2 = tr.cloneNode(true); tr2.querySelector('td').textContent = "カテゴリ"+["A","B","C","D"][Math.floor(Math.random()*4)]; var radios = tr2.querySelectorAll('[type="radio"]'); radios[0].name = radios[1].name = i + 2 + "_flag"; tr.parentNode.appendChild(tr2); } //-----ここからグリモン----- //radioにclassを付ける var catList = []; var cat = document.evaluate('//td[input[@type="radio"]]', document, null, 7, null); for (var i=0, n=cat.snapshotLength; i<n; i++) { var catName = document.evaluate('preceding-sibling::td', cat.snapshotItem(i), null, 9, null).singleNodeValue.textContent; cat.snapshotItem(i).parentNode.querySelector('input[type="radio"]').parentNode.classList.add(catName); //カテゴリ名の収集 if(catList.indexOf(catName) == -1) catList.push(catName); } //ボタン追加 var div = document.createElement('div'); div.setAttribute('style', 'position:fixed; bottom: 20px; left: 10px;'); catList.forEach(function(e) { var btn = document.createElement('button'); btn.textContent = e; btn.addEventListener('click', function() { Array.forEach(document.querySelectorAll('input[type="radio"]'), function(f) { if (f.parentNode.classList.contains(e)) f.parentNode.querySelector('input[type="radio"][value="1"]').click(); else f.parentNode.querySelector('input[type="radio"][value="0"]').click(); }); }, false); div.appendChild(btn); }); document.body.insertBefore(div, document.body.firstChild); //-----ここまで----- } </script> </head> <body> <form> <table> <tr> <td>カテゴリA</td> <td> <input checked="checked" value="1" name="1_flag" type="radio"><label>ON</label> <input value="0" name="1_flag" type="radio"><label>OFF</label> </td> </tr> </table> <input type="submit" value="submit"> </form> </body> </html>
これ以上回答リクエストを送信することはできません。制限について
1
1
1
2
2
1
3
21
19
コメント（4件)
カテゴリ名がある<td>に特徴的なclassやidがなかったり想定できない場合は、DOMを手がかりにXPathを使って取得する。今回はradioboxを持つ<td>（軸）にclassを付けて、カテゴリにマッチするチェックボックスをclick()するようにした。
if(catList.indexOf(catName) == -1)
↓
if (catList.every(function(e) { return e !== catName; })) {
こっちのほうがよかったです。
ちょっと苦手分野なので、現在確認しております。