Не удается найти последнее входное значение таблицы с jQuery, моя функция возвращает только jibberi sh. Как вы получаете входное значение последней строки? - PullRequest
Новая
       1

Не удается найти последнее входное значение таблицы с jQuery, моя функция возвращает только jibberi sh. Как вы получаете входное значение последней строки?

1 голос
/ 23 марта 2020

Извините за базовый c вопрос. Я только начал изучать Javascript около 5 дней go. У меня есть HTML форма / таблица, подобная этой: 

<body>
    <form onsubmit="playland()">
    <table id="dynamictable"> <!-- Added an id to the table element to easily select it and keep track of the rows -->
        <tr>
            <td>Name</td>
            <td>Location</td>
            <td>From</td>
            <td>To</td>
        </tr>

        <tr class="tr_clone">
            <td>
                <input type="text" autofocus placeholder="who" name="add" class="tr_clone_add" >
            </td>
            <td>
                <input type="text" autofocus placeholder="location" name="location" >
            </td>
            <td>
                <input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker">
            </td>
            <td>
                <input type="text" placeholder="End Date" name="datepicker_end" class="datepicker">
            </td>
        </tr>
    </table>

    <button  action="submit">Click me</button>
    </form>
</body>

Есть функция, которая обновляет строки после ввода ввода в последнюю строку. Вот эта функция: 

$(document).on('input', 'input.tr_clone_add', function() {


    if(document.getElementById("dynamictable").tBodies[0].rows.length ==    
            (this.parentNode.parentNode.rowIndex + 1)) {                        
                var $tr    = $(this).closest('.tr_clone');
                var $clone = $tr.clone();
                $clone.find(':text').val('');
                $tr.after($clone);
        }                                                                       
    });

Тогда вот функция, которую я пытаюсь сделать. Я не хочу получить последнее входное значение таблицы и сохранить его в переменной. Это просто возвращает кучу jibberi sh на данный момент, и я не могу понять, почему для моей жизни. 

function playland(){
    alert($("#dynamictable tr:last").prev().find("td").html());
}

1 Ответ

1 голос
/ 23 марта 2020

Вы были уже очень близко. Работающий JSFiddle .

Предполагая, что вложенные обработчики $(document).on('input', ... являются просто опечаткой, вот как вы можете получить значение последнего ввода в строке со второй по последнюю строку ( последняя строка теперь является новым пустым клоном): 

alert($("#dynamictable tr:last").prev().find("input:last").val());

Используя td в качестве селектора, вы выбираете ячейки таблицы, но на самом деле это ввод, который вы ищете. И использование .html() даст вам фактическое литеральное HTML содержимое ячеек таблицы, где вы действительно хотите ввести значение - которое вы получите с помощью .val().

Edit - некоторые предложения:

Ваш код смешивается jQuery с ванилью Javascript. Технически в этом нет ничего плохого, но с ним труднее читать и работать. Если у вас есть jQuery, вы можете использовать его.

Этот простой JS: 

document.getElementById("dynamictable").rows.length

можно записать в jQuery как: 

$('#dynamictable tr').length

Селектор jQuery соответствует всем строкам, а .length сообщит нам, сколько совпадений мы получили.

Этот простой JS: 

this.parentNode.parentNode.rowIndex

немного обманщик, но это jQuery работает: 

$(this).closest('tr').index()

$(this) в этом контексте относится к элементу input, который получил ввод. closest('tr') находит ближайшую родительскую строку, которая будет строкой, в которой находится ввод. И index(), в этом формате, сообщит нам позицию (начиная с нуля) этого элемента среди его братьев и сестер.

Просто для удовольствия, вы также можете написать весь этот тест в виде: 

if ($(this).closest('tr').is($("#dynamictable tr:last"))) {

Это просто проверяет, действительно ли строка с входными данными равна последней строка в таблице. Возможно, это немного более читабельно и понятно, чем в другой версии.

Далее, считается плохой практикой включать Javascript в строку с HTML, как обработчик onClick(). Лучшим подходом является разделение их и добавление обработчика событий в JS, например, что-то вроде: 

$('form').on('submit', playland);

Также обратите внимание, что когда вы обрабатываете отправку формы с помощью JS, вы ( вероятно?) не хочет, чтобы стандартная форма HTML отправлялась. Чтобы остановить это, вам нужно использовать параметр event, который автоматически передается любому обработчику событий, и остановить его - вы делаете это с помощью: 

function playland(event){
    event.preventDefault();
    // ... rest of your code

Вот обновленный JSFiddle со всеми этими изменениями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...