使用greasemonkey將複選框和標籤添加到頁面中

Question

因此，我添加了一個greasemonkey腳本，其中一個功能要求它將複選框和標籤插入頁面。

因此，已經有2個複選框和標籤，我將添加另一個複選框，而我基本上只是想將複選框添加到當前行後面的行中，但我不知道如何執行此操作。

下面是代碼，我要添加新的複選框中的這段（我將在末尾整個窗體）

<span class="smalltext">Type your reply to this message here.<br /><br /> 
       <label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" checked="checked" />&nbsp;<strong>Signature</strong></label><br /> 
       <label><input type="checkbox" class="checkbox" name="postoptions[disablesmilies]" value="1" />&nbsp;<strong>Disable Smilies</strong></label></span> 

所以，我怎麼能插入一個複選框河畔標籤2之後那些已經有

我怎樣才能檢查，如果複選框被選中或不

這裏是具有checkboxs在其整個窗體

<form method="post" action="newreply.php?tid=2292596&amp;processed=1" name="quick_reply_form" id="quick_reply_form"> 
<input type="hidden" name="my_post_key" value="de77ee8401edd4fe176f2c6a3787d411" /> 
<input type="hidden" name="subject" value="*" /> 

<input type="hidden" name="action" value="do_newreply" /> 
<input type="hidden" name="posthash" value="27dc484678c4aaceb647fc7e461bc869" id="posthash" /> 
<input type="hidden" name="quoted_ids" value="" id="quoted_ids" /> 
<input type="hidden" name="lastpid" id="lastpid" value="20693160" /> 
<input type="hidden" name="from_page" value="2" /> 
<input type="hidden" name="tid" value="2292596" /> 
<input type="hidden" name="method" value="quickreply" /> 

<table border="0" cellspacing="1" cellpadding="4" class="tborder"> 

    <thead> 
     <tr> 
      <td class="thead" colspan="2"> 
       <div class="expcolimage"><img src="http://cdn2.myforums.net/images/blackreign/collapse.gif" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div> 
       <div><strong>Quick Reply</strong></div> 
      </td> 
     </tr> 
    </thead> 

    <tbody style="" id="quickreply_e"> 
     <tr> 
      <td class="trow1" valign="top" width="22%"> 
       <strong>Message</strong><br /> 
       <span class="smalltext">Type your reply to this message here.<br /><br /> 
       <label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" checked="checked" />&nbsp;<strong>Signature</strong></label><br /> 
       <label><input type="checkbox" class="checkbox" name="postoptions[disablesmilies]" value="1" />&nbsp;<strong>Disable Smilies</strong></label></span> 

      </td> 
      <td class="trow1"> 
       <div style="width: 95%"> 
        <textarea style="width: 100%; padding: 4px; margin: 0;" rows="8" cols="80" name="message" id="message" tabindex="1"></textarea> 
       </div> 
       <div class="editor_control_bar" style="width: 95%; padding: 4px; margin-top: 3px; display: none;" id="quickreply_multiquote"> 
        <span class="smalltext"> 
         You have selected one or more posts to quote. <a href="./newreply.php?tid=2292596&amp;load_all_quotes=1" onclick="return Thread.loadMultiQuoted();">Quote these posts now</a> or <a href="javascript:Thread.clearMultiQuoted();">deselect them</a>. 
        </span> 

       </div> 
      </td> 
     </tr> 

     <tr> 
      <td colspan="2" align="center" class="tfoot"><input type="submit" class="button" value="Post Reply" tabindex="2" accesskey="s" id="quick_reply_submit" /> <input type="submit" class="button" name="previewpost" value="Preview Post" tabindex="3" /></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

爲了簡單起見，用jQuery做這件事。如果你還沒有在腳本中，這條線添加到metadata block：

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 

然後將代碼添加複選框，激活它是：

var checkboxCell = $("#quickreply_e td:eq(0) span.smalltext"); 
if (checkboxCell.length) { 
    checkboxCell.append (
     '<br><label><input type="checkbox" class="checkbox" name="myVeryOwnCheckbox" value="1" />' 
     + '&nbsp;<strong>My checkbox</strong></label>' 
    ); 

    $("#quickreply_e input[name='myVeryOwnCheckbox']").change (myCheckboxChangeHandler); 
} 

function myCheckboxChangeHandler() { 
    alert ("My checkbox was " + (this.checked ? "checked" : "unchecked")); 
} 

---

---

更新：現在OP已給出the target site，驗證該代碼是否適用於該網站。一個完整的工作腳本是：

// ==UserScript== 
// @name _Checkbox adder 
// @include http://www.hackforums.net/showthread.php* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 
// ==/UserScript== 

var checkboxCell = $("#quickreply_e td:eq(0) span.smalltext"); 
if (checkboxCell.length) { 
    checkboxCell.append (
     '<br><label><input type="checkbox" class="checkbox" name="myVeryOwnCheckbox" value="1" />' 
     + '&nbsp;<strong>My checkbox</strong></label>' 
    ); 

    $("#quickreply_e input[name='myVeryOwnCheckbox']").change (myCheckboxChangeHandler); 
} 

function myCheckboxChangeHandler() { 
    alert ("My checkbox was " + (this.checked ? "checked" : "unchecked")); 
} 

Answer 2

的想法很簡單：

1. 查找第一個單元格中的表體的第一行ID爲 「quickreply_e」。
2. 創建所需的複選框。
3. 將創建的複選框追加到單元格子列表的末尾。

這裏是你如何能找到一個細胞：

var tbody = document.getElementById("quickreply_e"); 
var cell = tbody.rows[0].cells[0]; 

元素與document.createElement創建和孩子的用appendChild追加。有一些例子，所有你需要的是一致地調用這兩種方法來創建所需的複選框。我沒有爲你寫，因爲它是非常無聊的任務:)