总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/
您可以使用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] 删除。
我来说两句