Добавить текст в последний столбец с помощью Jquery

0

Я хочу добавить текст в последний столбец таблицы (сетка как структура). Как ниже

Изображение 174551

При нажатии кнопки " Add я хочу добавить какой-либо текст в последний столбец рядом с кнопкой " Add. Я получаю текст после нажатия Add как показано на рисунке выше.

Это то, что я пробовал до сих пор (в одном шаге):

$(document).ready(function(){
$('.new').on('click', function(){  
    var recId= $(this).parents("#myTable td:last-child");
     recId.append('<b>Sometext</b>');
     recId.css("background-color", "lightgreen");
   });
});

Может кто-то помочь мне исправить это, Пример JSFiddle

Изменить для ясности

Sometext добавленный в последнем столбце, является динамическим, а событие click на кнопке Add должно срабатывать несколько раз.

Теги:

3 ответа

1
Лучший ответ

Пытаться:

$(document).ready(function(){
    $('.new').on('click', function(){  
        var recId= $(this).parents("#myTable td:last-child");
        recId.find('b').remove(); //remove text
        recId.append('<b>Sometext</b>');
        recId.css("background-color", "lightgreen");
    });
});

DEMO here.

Поделиться
  • 0
    Решение работает как шарм.
  • 0
    @Pratik спасибо :)
3

Попробовать .one()

Прикрепите обработчик к событию для элементов. Обработчик выполняется не более одного раза для каждого элемента для каждого типа события.

$('.new').one('click', function () {

fiddle Demo

Обновлен после комментария OP.

fiddle Demo

$(document).ready(function () {
    $('.new').on('click', function () {
        var recId = $(this).parents("#myTable td:last-child");
        if (recId.text().indexOf("Sometext") === -1) { //if it contains Sometext it will not append it again but if it a new value it will append it
            recId.append('<b>Sometext</b>');
            recId.css("background-color", "lightgreen");
        }
    });
});

Лучший код

fiddle Demo

$(document).ready(function () {
    $('.new').on('click', function () {
        var recId = $(this).parent();
        recId.find('b').remove();
        recId.append('<b>Sometext</b>');
        recId.css("background-color", "lightgreen");
    });
});
Поделиться
  • 0
    Решение действительно для представленной проблемы, но sometext добавленный sometext является динамическим из асинхронного вызова ajax. Следовательно, я хочу, чтобы событие сработало больше, чем один.
  • 0
    @Pratik Проверьте обновленный ответ
Показать ещё 4 комментария
1

Я сделал это с вашим JS.

$(document).ready(function(){
    $('.new').on('click', function(){  
        var recId= $(this).parents("#myTable td:last-child");
        if (!recId.hasClass("changed")) {
            recId.append('<b>Sometext</b>');
            recId.css("background-color", "lightgreen");
            recId.addClass("changed");
        }
    });
});

если td имеет класс "изменен", если нет: добавьте текст, измените bgcolor и добавьте класс "изменен", чтобы событие могло срабатывать, но ничего не будет делать с тем же td дважды.

Поделиться
  • 0
    Я верю, что это сработает для первого мероприятия. Спасибо за вашу помощь.
  • 0
    Немного неверно истолковал ваш вопрос. Нет проблем (=

Ещё вопросы

Сообщество Overcoder
Наверх
Меню