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

做了一个jfiddle !! 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>');

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

2 个答案: