Как использовать регулярное выражение для селектора jquery, чтобы применить некоторый атрибут к элементам?

#javascript #jquery #css #html-table

#javascript #jquery — jquery — запрос #css — файл #html-таблица #jquery #css

Вопрос:

У меня есть кнопка редактирования, которая должна сделать содержимое этой таблицы доступным для редактирования. Идентификатор кнопки и класс выглядят следующим образом.

 id="edit_icon_'.$row1["client_id"].'_'.$row2["project_id"].'"
class="editbtn"

Идентификатор зависит от значений базы данных. При нажатии этой кнопки я хочу, чтобы все элементы таблицы «только одна таблица» были доступны для редактирования..

 <tr>
    <td id="edit_elem_'.$row2["project_id"].'_'.$row3["detail_id"].'">'.$row3["elements"].'</td>
    <td id="edit_respon_'.$row2["project_id"].'_'.$row3["detail_id"].'">'.$row3["responsibilty"].'</td>
    <td id="edit_remark_'.$row2["project_id"].'_'.$row3["detail_id"].'">'.$row3["remarks"].'</td>
</tr>

Вот как выглядят строки таблицы.. Все они имеют динамические идентификаторы.
Как я должен написать селекторы с регулярным выражением, чтобы это сработало?

 $(document).on('click', '.editclick', function() { //entering edit mode
    var str = $(this).attr("id");              // edit_icon_1_124
    var cid = str.replace(/^D |D.*$/g, "");  // 1
    var pid = num = str.replace(/.*D/g, "");  // 124
    $('').each(function(){                 //  #edit_*_pid_* -expected, *-wildcard
        $(this).attr('contenteditable','true'); 
    });
});

Редактировать: P.S. У меня есть несколько таблиц, сгенерированных на одной странице..

1. Не создавайте такие сложные идентификаторы. Используйте класс для элементов и присваивайте им некоторые атрибуты данных.

2. Таблица, которую я показал, — это всего лишь фрагмент. Страница содержит несколько генерируемых таблиц, которые будут иметь идентификаторы или классы, отличающиеся переменной, с которой я добавляю ее из базы данных.

Ответ №1:

Для этого вам не нужно РЕГУЛЯРНОЕ выражение. Вы можете использовать data- атрибут для хранения идентификатора, для редактирования которого предназначена кнопка редактирования.

Кнопка:

 <button class='editclick' data-pid="124" data-did="1">Edit</td>

Таблица (добавить класс для каждого did и pid ):

 <tr>
    <td id="edit_elem_'.$row2["project_id"].'_'.$row3["detail_id"].'" class="p'.$row2["project_id"].' d'.$row3["detail_id"].'">'.$row3["elements"].'</td>
    <td id="edit_respon_'.$row2["project_id"].'_'.$row3["detail_id"].'" class="p'.$row2["project_id"].' d'.$row3["detail_id"].'">'.$row3["responsibilty"].'</td>
    <td id="edit_remark_'.$row2["project_id"].'_'.$row3["detail_id"].'" class="p'.$row2["project_id"].' d'.$row3["detail_id"].'">'.$row3["remarks"].'</td>
</tr>

JavaScript:

 $(document).on('click', '.editclick', function() { //entering edit mode
    var cid = $(this).data('did');  // 1
    var pid = num = $(this).data('pid')  // 124
    $("td.d" did ".p" pid).attr('contenteditable','true');
});