将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>

名称
量
价格
产品1
产品2

我的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>');
    });
});

$（文档）.ready（函数（）{
$（“.boxed”）。单击（函数（事件）{
var productName=$（this.find（'.boxTitle'）；
//突出显示-这很好
$（this.toggleClass（“highlightedBox”）；
productName.toggleClass（“boxTitleHl”）；
//将新行添加到表的末尾
$（'theOrder'）。追加（'productName'）；
});
});

我甚至试着这样做，但它只是打印出[对象][对象]。。我不知道为什么。是否需要将对象转换为字符串

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

$（'theOrder'）。追加（'zzzz'）；
$（“.newLine”）.text（产品名称）；

---

做了一把小提琴

您可以使用jQuery或获取标签内的内容

改变

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

到

或

也改变这一行

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

$（'#theOrder'）。追加（'+productName+''）；

试试这个代码

  $( ".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>');
    });

$（.boxed”）。单击（函数（事件）{
var puddingN=$（this.find（'.boxTitle'）；
puddingName=puddingN.text（）；
//突出显示盒子和布丁名称
$（this.toggleClass（“highlightedBox”）；
puddingN.toggleClass（“boxTitleHl”）；
//测试：将表的标题更改为布丁名称。。
$（“.orderTitle”）.text（布丁名称）；
//将新行添加到表的末尾
//$（'theOrder'）。追加（'eek'）；
//将文本更改为布丁的名称，但不起作用：（）
//$（“.newLine”）.text（puddingName）；
$（“#theOrder”）.append（“”+puddingName+“”）；
});

---

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

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

var-productName=$（this.find（'.boxTitle'）.text（）；
$（'#theOrder'）。追加（'+productName+''）；

您能在这里创建/添加JSFIDLE链接吗？它将帮助我们帮助您！：=）如何选择文本框？我想你指的是支票箱你好，谢谢你的回复。当我尝试更改此选项时，没有任何功能与单击关联works@user3315303：很乐意帮忙

  $( ".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>');
    });

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