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

Question

这里是 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/

Answer 1

您可以使用 jQuery text() 或 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>');
    });

Fiddle Demo

Answer 2

您需要将字符串与变量连接起来

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>');