Question

所以我有一个我要添加的greasemonkey脚本，其中一个功能要求它在页面上插入一个复选框和标签。

所以我已经有两个复选框和标签，我将添加另一个，我基本上只是想将当前的复选框添加到该行，但我不知道如何做到这一点。

以下是我想要添加新复选框的代码片段（我将在最后包含整个表单）

<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之后插入一个复选框和一个标签

如何检查复选框是否已选中

以下是包含复选框的整个表单

<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

这个想法很简单：

在表格主体的第一行中找到ID为“quickreply_e”的第一个单元格。
创建所需的复选框。
将创建的复选框附加到单元格子列表的末尾。

以下是查找单元格的方法：

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

使用document.createElement创建元素，并在子项后添加appendChild。有一些例子，所以你需要的是始终如一地调用这两种方法来创建所需的复选框。我没有为你写它，因为这是非常无聊的任务：）

在带有greasemonkey的页面中添加一个复选框和标签

2 个答案: