将jQuery选择器变量附加到表中

嘘声

总jQuery /编程新手在这里。

我有一堆可以选择的文本框。选中该框后,我想在表格中添加新行,并将文本框中的h4添加到新行的第一列中。在变量上遇到了一些麻烦。

文本框如下所示:

<div class="boxed" data-price="7">
    <h4 class="boxTitle">Lemons</h4>
    <p>blahblahblah</p>
</div>

表格看起来像这样:

<tbody>
    <table class="table table-hover" id="theOrder">
    <tr>
        <th>Name</th>
        <th>Quantity</th>       
        <th>Price</th>
    </tr>
    <tr>
        <td>Product1</td>
        <td><input type="text" class="form-control" value="1"></td> 
    </tr>
    <tr>
        <td>Product2</td>
        <td><input type="text" class="form-control" value="1"></td> 
    </tr></table></tbody>

和我的jquery看起来像这样,但是如何获取它来打印变量productName而不是字符串?

$(document).ready(function() {

  $( ".boxed" ).click(function( event ) {
        var productName = $(this).find('.boxTitle');
        // highlighting - this works fine
$(this).toggleClass("highlightedBox");
        productName.toggleClass("boxTitleHl");

        // adds new row to the end of the table
        $('#theOrder').append('<tr><td class="newLine">productName</td><td><input type="text" class="form-control" value="1"></td></tr>');
    });
});

我什至尝试这样做,但是它只是打印出[object] [object] ..我不确定为什么。我需要将对象转换为字符串吗?

$('#theOrder').append('<tr><td class="newLine">zzzz</td><td><input type="text" class="form-control" value="1"></td></tr>');
$(".newLine").text(productName);

做个小提琴!! http://jsfiddle.net/hBuck/

普拉纳夫·C·巴兰(Pranav C Balan)

您可以使用jQuerytext()html()在标签内获取内容

改变

var productName = $(this).find('.boxTitle');

var productName = $(this).find('.boxTitle').html();

或者

var productName = $(this).find('.boxTitle').text();

还要改变这条线

$('#theOrder').append('<tr><td class="newLine">'+productName+'</td><td><input type="text" class="form-control" value="1"></td></tr>');

试试这个代码

  $( ".boxed" ).click(function( event ) {
        var puddingN = $(this).find('.boxTitle');
        puddingName=puddingN.text();
        // highlight the box and the pudding name
        $(this).toggleClass("highlightedBox");
        puddingN.toggleClass("boxTitleHl");

        // TEST: changes title of table to pudding name..
        $(".orderTitle").text(puddingName);

        // adds new row to the end of the table
        //$('#theOrder').append('<tr><td class="newLine">EEEEK</td><td><input type="text" class="form-control" value="1"></td></tr>');
        // changes text to the name of the pudding but doesn't work :()
        //$(".newLine").text(puddingName);

        $('#theOrder').append('<tr><td class="newLine">'+puddingName+'</td><td><input type="text" class="form-control" value="1"></td></tr>');
    });

小提琴演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将on()方法附加到jquery选择器

来自分类Dev

如何使用jQuery将HTML附加到HTML字符串中找到的选择器中?

来自分类Dev

将jQuery选择器存储在变量中

来自分类Dev

附加到不同委托选择器的jQuery触发事件?

来自分类Dev

将选择器放置在变量中

来自分类Dev

jQuery选择器中的Razor变量

来自分类Dev

jQuery检查变量中的选择器

来自分类Dev

如何将变量添加到伪类的 jquery 选择器?

来自分类Dev

jQuery选择器,仅将+符号附加到span类的第一个实例

来自分类Dev

将动态ID添加到jQuery选择器

来自分类Dev

如何在表选择器中使用 jQuery 变量

来自分类Dev

将日期选择器选择附加到文本区域

来自分类Dev

jQuery将选择器引用为变量

来自分类Dev

将变量与jquery选择器一起使用

来自分类Dev

将变量传递给jquery选择器

来自分类Dev

将变量传递给 jQuery 属性包含选择器

来自分类Dev

将JQuery选择器的结果存储在变量中可以吗?

来自分类Dev

将jQuery选择器存储到变量中不起作用?

来自分类Dev

如何将后代选择器连接到jQuery中的变量

来自分类Dev

将变量附加到mysql表数据中

来自分类Dev

如何扩展存储在变量中的jQuery选择器?

来自分类Dev

更改jQuery中的变量选择器的属性?

来自分类Dev

如何扩展存储在变量中的jQuery选择器?

来自分类Dev

在jQuery中添加变量和多个选择器

来自分类Dev

如何在 jQuery 选择器中包含变量?

来自分类Dev

特定表中特定类的tr的jQuery选择器

来自分类Dev

在 jquery 数据表中插入日期选择器

来自分类Dev

如何使引导日期选择器中的容器附加到特定元素?

来自分类Dev

使用jQuery将td附加到表中的tr

Related 相关文章

热门标签

归档