Javascript 如何将span标记存储在文本框旁边？

您好，下面我有一个javascript代码，其中应该发生的是，它附加了一个文本框和文本框旁边的[Open Grid]（在一个span中）。文本框存储在数组+“[]”中，因此我尝试使用.after（）将span放在文本框之后，但问题是，即使它显示文本框，也不会显示span[开放网格]。如何使超链接显示在文本框旁边

代码如下：

    <script>

    $(document).on('click','.showGrid', function(e) {

        $(".gridBtns").removeClass("gridBtnsOn");

        var value = $(this)
            .siblings('input[name=gridValues]').val();

        $("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn");

        $('.optionTypeTbl').fadeToggle('slow');
        $(this).parent().append($('.optionTypeTbl'));
        $('.optionTypeTbl').css({

            left: $(this).position().left,
            top: $(this).position().top + 20

        });

        e.stopPropagation();

    });


        function insertQuestion(form) {   

        var context = $('#optionAndAnswer');

        var $tbody = $('#qandatbl > tbody'); 
        var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
        var $options = $("<td class='option'></td>");

        $('.gridTxt', context).each( function() {

var $this = $(this);
var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />")
    .attr('name',$this.attr('name')+"[]")
    .attr('value',$this.val())
    .appendTo( $options )
    .after("<span href='#' class='showGrid'>[Open Grid]</span>");

    $questionType = $this.val();


        });

        $tr.append($options);    
        $tbody.append($tr); 

        }

    </script>


    <form id="QandA" action="insertQuestion.php" method="post" >


    <table id="optionAndAnswer" class="optionAndAnswer">
    <tr class="option">
    <td>Option Type:</td>
    <td>
    <div>
        <input type="text" name="gridValues" class="gridTxt maxRow" readonly="readonly" />
        <span href="#" class="showGrid" id="showGridId">[Open Grid]</span>
    </div>
    <table class="optionTypeTbl">
    <tr>

        <?php
        $i = 1;
        foreach($num as $key => $val){
            if($i%7 == 1) echo"<tr><td>";
            echo"<input type=\"button\" value=\"$val\" id=\"btn".$val."\" name=\"btn".$val."Name\" class=\"gridBtns gridBtnsOff\">";        
            if($i%7 == 0) echo"</td></tr>";
            $i++;
        }
        ?>

            </tr>
            <tr>
            <td>
            <input class="gridBtns" name="btnTrueorFalseName"  id="btnTrueorFalse"  type="button"  value="True or False"  />
            <input class="gridBtns" name="btnYesorNoName"  id="btnYesorNo"  type="button"  value="Yes or No"  />
            </td>
            </tr> 
            </table>

            </td>
    </tr>
    </td>
    </tr>
    </table>


    </form>

$（文档）.on（'click'，'showGrid'，函数（e）{
$（“.gridBtns”）.removeClass（“gridBtnsOn”）；
var值=$（此）
.sides（'input[name=gridValues]'）.val（）；
$（“#btn”+value.replace（/\s/g.））.addClass（“gridBtnsOn”）；
$（'.optionTypeTbl'）.fadeToggle（'slow'）；
$（this.parent（）.append（$（'.optionTypeTbl'））；
$（'.optionTypeTbl'）.css({
左：$（this）.position（）.left，
顶部：$（此）.position（）.top+20
});
e、 停止传播（）；
});
函数insertQuestion（form）{
变量上下文=$（'optionandswer'）；
变量$tbody=$（“#qanadbl>tbody”）；
var$tr=$（“”）；
var$options=$（“”）；
$（'.gridTxt'，context）.each（函数（）{
var$this=$（this）；
变量$optionsText=$（“”）
.attr（'name'，$this.attr（'name'）+“[]”）
.attr（'value'，$this.val（））
.appendTo（$options）
.在“[开放网格]”之后；
$questionType=$this.val（）；
});
$tr.append（$options）；
$tbody.append（$tr）；
}
选项类型：
[开放式网格]

var$this=$（this）；
变量$optionsText=$（“”）
.attr（'name'，$this.attr（'name'）+“[]”）
.attr（'value'，$this.val（））
.appendTo（$options）
.在“[开放网格]”之后；

试试这个

因为你的：

var value = $(this)
            .siblings('input[name=gridValues]').val();

实际上是：

var value = $(this)
            .siblings('input[name=gridValues[]]').val();

试试这个。如果没有。还有

.map（）

——我以前没有用过，但我们可以一起研究

---

更新

可能您甚至需要：

var value = $(this)
            .siblings('input[name=gridValues\\[\\]]').val();

---

能否显示将$（'.showGrid'）转换为链接的代码？它应该在你的脚本中。你的示例中缺少了重要的代码块。最重要的是，我看不到任何看起来像链接的东西。实际上，它不是链接，而是我用上面发布的css使其看起来像一个链接。还应该有一块js代码，在点击$（'.showGrid'）时会做出反应。click（）-你能提供这个吗？你能把整个js代码放进去吗。我知道你有；）我已经这样做了，它确实显示了[Open Grid]，但问题是，如果您查看我更新的代码（但假设您的答案替换了问题中的部分代码），那么每次我将文本框和span添加到表行中时，表行中的[Open Grid]在我单击它时不会打开任何内容。但是如果我删除+“[]”，那么它就可以工作了。但是我需要+“[]”和一个工作的[开放网格]。嗨，我会测试这个并给你回复。我只是在我的应用程序上做了些别的事情，很抱歉迟到了。你这个了不起的天才，你又解决了这个问题。最后需要的是[]。再次感谢你的帮助埃伦：）你最好！

var value = $(this)
            .siblings('input[name=gridValues\\[\\]]').val();