Поиск и замена в таблице
153
22 марта 2019, 10:40
Как в таблице найти строку и в этой строке заменить одно значение?
function Row(id) {
var index = $('table thead th').index($('#id'));//сдесь не чего не находит
$('td #bg').each(function() {
//а как дальше не соображу
}
};TABLE {
width: 300px;
/* Ширина таблицы */
border-collapse: collapse;
/* Убираем двойные линии между ячейками */
}
TD,
TH {
padding: 3px;
/* Поля вокруг содержимого таблицы */
border: 1px solid black;
/* Параметры рамки */
}
TH {
background: #b0e0e6;
/* Цвет фона */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col">
<div class="card shadow">
<div class="card-header border-0">
<h3 class="mb-0">Card tables</h3>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<th id="id" scope="col">ID</th>
<th scope="col">ФИО</th>
<th scope="col">Группа</th>
<th scope="col">Специальность</th>
<th scope="col">Проект</th>
<th scope="col">Задолженость</th>
<th scope="col">Статус</th>
<th scope="col">Действие</th>
</thead>
<tbody>
<tr id="8" class="id2">
<td>8</td>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Иванов Иван Петрович</span>
</div>
</div>
</th>
<td>244</td>
<td>
<span class="badge badge-dot mr-4">
Менеджер
</span>
</td>
<td>
<div class="avatar-group">
<span id="confi" class="badge badge-dot mr-4">
<i class="bg-success"></i> загрузил
</span>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">0</span>
</div>
</td>
<td>
<div class="avatar-group">
<span id="bg" class="badge badge-dot mr-4">
<i class="bg-warning"></i> не подтвержден</span>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<input type="button" value="Подтвердить" class="dropdown-item" onclick="Row(8)">
<a class="dropdown-item" id="ot">Отказать</a>
</div>
</div>
</td>
</tr>
<tr id="8" class="id2">
<td>8</td>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Иванов Иван Иванович</span>
</div>
</div>
</th>
<td>244</td>
<td>
<span class="badge badge-dot mr-4">
Програмист
</span>
</td>
<td>
<div class="avatar-group">
<span id="confi" class="badge badge-dot mr-4">
<i class="bg-success"></i> загрузил
</span>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">0</span>
</div>
</td>
<td>
<div class="avatar-group">
<span id="bg" class="badge badge-dot mr-4">
<i class="bg-warning"></i> подтвержден</span>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<input type="button" value="Подтвердить" class="dropdown-item" onclick="Row(8)">
<a class="dropdown-item" id="ot">Отказать</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Необходимо заменить значение в поле "Статус"
Answer 1
Можно так, если есть возможность сделать id для каждого индивидуальный, то можно сделать и по другому (id=bg_1)
<td>
<div class="avatar-group">
<span id="bg_1" class="badge badge-dot mr-4">
<i class="bg-warning"></i> подтвержден</span>
</div>
</td>
$('.dropdown-item').on("click", function(){
var parent = $(this).parent().parent().parent().parent();//Получает <tr>
var status = parent.find('td:eq(5)');// в <tr> ищем 5 по щету td - стутус
var status_text = status.text().replace(/\s{2,}/g, ' ');// удаляем все лишнии пробелы
if(status_text == 'подтвержден') {//Проверяем текст
status.text('не подтвержден');//меняем текст
} else {
status.text('подтвержден');
}
})TABLE {
width: 300px;
/* Ширина таблицы */
border-collapse: collapse;
/* Убираем двойные линии между ячейками */
}
TD,
TH {
padding: 3px;
/* Поля вокруг содержимого таблицы */
border: 1px solid black;
/* Параметры рамки */
}
TH {
background: #b0e0e6;
/* Цвет фона */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col">
<div class="card shadow">
<div class="card-header border-0">
<h3 class="mb-0">Card tables</h3>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<th id="id" scope="col">ID</th>
<th scope="col">ФИО</th>
<th scope="col">Группа</th>
<th scope="col">Специальность</th>
<th scope="col">Проект</th>
<th scope="col">Задолженость</th>
<th scope="col">Статус</th>
<th scope="col">Действие</th>
</thead>
<tbody>
<tr id="8" class="id2">
<td>8</td>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Иванов Иван Петрович</span>
</div>
</div>
</th>
<td>244</td>
<td>
<span class="badge badge-dot mr-4">
Менеджер
</span>
</td>
<td>
<div class="avatar-group">
<span id="confi" class="badge badge-dot mr-4">
<i class="bg-success"></i> загрузил
</span>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">0</span>
</div>
</td>
<td>
<div class="avatar-group">
<span id="bg_1" class="badge badge-dot mr-4">
<i class="bg-warning"></i> не подтвержден</span>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<input type="button" value="Подтвердить" class="dropdown-item" onclick="Row(8)">
<a class="dropdown-item" id="ot">Отказать</a>
</div>
</div>
</td>
</tr>
<tr id="8" class="id2">
<td>8</td>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Иванов Иван Иванович</span>
</div>
</div>
</th>
<td>244</td>
<td>
<span class="badge badge-dot mr-4">
Програмист
</span>
</td>
<td>
<div class="avatar-group">
<span id="confi" class="badge badge-dot mr-4">
<i class="bg-success"></i> загрузил
</span>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">0</span>
</div>
</td>
<td>
<div class="avatar-group">
<span id="bg_2" class="badge badge-dot mr-4">
<i class="bg-warning"></i> подтвержден</span>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<input type="button" value="Подтвердить" class="dropdown-item" onclick="Row(8)">
<a class="dropdown-item" id="ot">Отказать</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>Answer 2
Непонятно назначение конструкции <i class="bg-warning"></i>подтвержден с текстом вне тегов. Текст лучше поместить в тег и в js циклом пройтись и поменять. А затем уже в функцию или куда нужно вставить.
let status = document.getElementsByClassName('bg-warning');
for (let i=0; i < status.length; i++) {
status[i].innerHTML = 'Подтверждён';
}TABLE {
width: 300px;
/* Ширина таблицы */
border-collapse: collapse;
/* Убираем двойные линии между ячейками */
}
TD,
TH {
padding: 3px;
/* Поля вокруг содержимого таблицы */
border: 1px solid black;
/* Параметры рамки */
}
TH {
background: #b0e0e6;
/* Цвет фона */
}<div class="row">
<div class="col">
<div class="card shadow">
<div class="card-header border-0">
<h3 class="mb-0">Card tables</h3>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<th id="id" scope="col">ID</th>
<th scope="col">ФИО</th>
<th scope="col">Группа</th>
<th scope="col">Специальность</th>
<th scope="col">Проект</th>
<th scope="col">Задолженость</th>
<th scope="col">Статус</th>
<th scope="col">Действие</th>
</thead>
<tbody>
<tr id="8" class="id2">
<td>8</td>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Иванов Иван Петрович</span>
</div>
</div>
</th>
<td>244</td>
<td>
<span class="badge badge-dot mr-4">
Менеджер
</span>
</td>
<td>
<div class="avatar-group">
<span id="confi" class="badge badge-dot mr-4">
<i class="bg-success"></i> загрузил
</span>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">0</span>
</div>
</td>
<td>
<div class="avatar-group">
<span id="bg" class="badge badge-dot mr-4">
<i class="bg-warning">не подтвержден</i> </span>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<input type="button" value="Подтвердить" class="dropdown-item" onclick="Row(8)">
<a class="dropdown-item" id="ot">Отказать</a>
</div>
</div>
</td>
</tr>
<tr id="8" class="id2">
<td>8</td>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
</a>
<div class="media-body">
<span class="mb-0 text-sm">Иванов Иван Иванович</span>
</div>
</div>
</th>
<td>244</td>
<td>
<span class="badge badge-dot mr-4">
Програмист
</span>
</td>
<td>
<div class="avatar-group">
<span id="confi" class="badge badge-dot mr-4">
<i class="bg-success"></i> загрузил
</span>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">0</span>
</div>
</td>
<td>
<div class="avatar-group">
<span id="bg" class="badge badge-dot mr-4">
<i class="bg-warning">подтвержден</i> </span>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<input type="button" value="Подтвердить" class="dropdown-item" onclick="Row(8)">
<a class="dropdown-item" id="ot">Отказать</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47546 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30490 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23620 visits
- Как через css изменить цвет png изображения? 10345 visits
- Blob video url download 9952 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8087 visits
© "hostciti.net" 15.11.2024 | 11:16