Нажмите в х редактируемый и пустой тд - PullRequest
Новая
       31

Нажмите в х редактируемый и пустой тд

0 голосов
/ 30 сентября 2019

Я хочу выбрать td для редактирования в моей таблице и автоматически очистить текст этого td. 

$('#table').editable({
        container: 'body',
        selector: 'td.task',
        title: 'task',
        type: "POST",
        showbuttons: true,
        type: 'text',
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        },  
        success: function(response) {
        }
    });
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>

<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td data-name="task" data-placement="bottom" class="task" data-type="text">001</td>
  </tr>
    <tr>
  <td>2</td>
  <td data-name="task" data-placement="bottom"  class="task" data-type="text">002</td>
  </tr>
  </tbody>
</table>
Я нашел этот код $('.editable').editable('setValue', null), но только с ID. Я не знаю, как использовать в таблице setValue. Надеюсь, я хорошо объясню. Привет

1 Ответ

1 голос
/ 30 сентября 2019

Вы можете использовать этот простой способ, чтобы выбрать td и очистить его текст при щелчке. 

let td = document.querySelectorAll("td");
for(let i of td) {
    i.addEventListener('click', () => {
        i.innerHTML = "";
    })
}

Он добавит прослушиватель событий на все tds, если вы хотите только выбрать td с заданием класса, затемзамените значение querySelectorAll () на "td.task"

...