1

Как в таблице найти строку и в этой строке заменить одно значение?

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>

Необходимо заменить значение в поле "Статус"

2 ответа 2

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>

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.