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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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