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

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

因此，已经有两个复选框和标签，我将在其中添加另一个复选框和标签，我基本上只想在当前复选框之后的行中添加我的复选框，但我不知道如何做到这一点

下面是我想添加新复选框的一小段代码（我将在末尾包括整个表单）

在此处键入对此邮件的回复。


签名

禁用微笑

那么，如何在已经存在的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>

快速回复
消息

在此处键入对此邮件的答复。


签名

禁用微笑
您已选择一篇或多篇文章进行报价。或

想法很简单：

查找id为“quickreply_e”的表体第一行的第一个单元格

创建所需的复选框

将创建的复选框附加到单元格子列表的末尾

以下是如何找到单元格：

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

---

元素是用创建的，子元素是附加的。这里有一些示例，所以您所需要的就是一致地调用这两个方法来创建所需的复选框。我没有为您编写它，因为它是一项非常枯燥的任务：）

为了简单起见，请使用jQuery完成这项工作。如果脚本中尚未包含该行，请将该行添加到：

然后，添加复选框并激活它的代码是：

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") );
}

var checkboxCell=$（“#quickreply_e td:eq（0）span.smalltext”）；
if（checkboxCell.length）{
checkboxCell.append(
“
”
+“我的复选框”
);
$（“#quickreply_e input[name='myVeryOwnCheckbox']”）.change（myCheckboxChangeHandler）；
}
函数myCheckboxChangeHandler（）{
警报（“我的复选框是”+（this.checked？）：“unchecked”）；
}

---

---

更新：既然OP已经给出，验证代码是否对该站点有效。完整的工作脚本是：

// ==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") );
}

/==UserScript==
//@name\u复选框加法器
//@包括http://www.hackforums.net/showthread.php*
//@需要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(
“
”
+“我的复选框”
);
$（“#quickreply_e input[name='myVeryOwnCheckbox']”）.change（myCheckboxChangeHandler）；
}
函数myCheckboxChangeHandler（）{
警报（“我的复选框是”+（this.checked？）：“unchecked”）；
}

这似乎不起作用。我不知道为什么，因为我以前从未真正使用过jquery，它可以在您提供的结构的页面上完美工作；我只是做了个模型，测试了一下。你使用的是什么版本的Greasemonkey和Firefox？现有复选框是由AJAX还是javascript添加的？链接到目标页面。卸载并重新安装Greasemonkey脚本。我将页面结构直接从我试图使用它的站点复制出来。这是一个页面，它将在其中运行（你可能必须是一名会员。我在该网站上测试了代码，它运行得非常完美，尽管我对其进行了轻微的布局美学调整。在答案中添加了一个完整的工作脚本。谢谢你的帮助，我不知道我所做的有什么问题，但它现在可以工作了。但是我还有一个问题，我也在另一个页面上做这件事年龄。同样的想法和一切，所以我假设我可以重用除var checkboxCell=…one之外的所有代码。因此，在上面的一个代码中，您从tbody开始，并变得更具体。我不知道如何对没有tbody标记的页面执行相同的操作，主要是因为我不习惯jquery。现在我没有字符了，所以这是页面我相信我了解除此之外，其他一切的工作原理/实现方式

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") );
}

// ==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") );
}