人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Greasemonkey で、既存のページに複数ある radioボタンのうち、隣にある「カテゴリ」を現すテキストの同じものだけ、チェックするボタンを作りたいと思っています。

現在の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 がついていないため、どうなのかと。
そもそも実現可能か、可能であれば、どこを調べればよいか。
ご教授願いします。

●質問者: subweb
●カテゴリ:インターネット ウェブ制作
✍キーワード: Class Class Greasemonkey hoge HTML
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●60ポイント ベストアンサー

カテゴリ名を自動で取得して、それぞれを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>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ