Добавление переменной селектора jQuery в таблицу

Question

Добавление переменной селектора jQuery в таблицу

0

полный 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/

boo 16 фев. 2014, в 07:49

Источник

0

Можете ли вы создать / добавить ссылку на jsfiddle здесь? Это поможет нам помочь вам! знак равно
Maulik Suchak 16 фев. 2014, в 06:26
0

Как вы можете выбрать текстовое поле? Я думаю, что вы имеете в виду флажок
Amit Joki 16 фев. 2014, в 06:27
0

Jfiddle сделал! :)
boo 16 фев. 2014, в 06:35

Показать ещё 1 комментарий

Теги:

jquery

html

dom

jquery-selectors

jquery-append

2 ответа

0

Вам нужно объединить строку с переменной

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

Ankur Aggarwal 16 фев. 2014, в 04:03

0

Здравствуйте, спасибо за ваш ответ. Когда я пытаюсь изменить это, ни одна из функций, связанных с щелчком, не работает
boo 16 фев. 2014, в 06:41

Ещё вопросы

Можете ли вы создать / добавить ссылку на jsfiddle здесь? Это поможет нам помочь вам! знак равно
Как вы можете выбрать текстовое поле? Я думаю, что вы имеете в виду флажок
Здравствуйте, спасибо за ваш ответ. Когда я пытаюсь изменить это, ни одна из функций, связанных с щелчком, не работает

Pranav C Balan · Accepted Answer · 2014-02-16T04-23-00.000Z

Вы можете использовать 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>');
    });

Демо-версия скрипта

Большое спасибо! работает отлично