Регулировка размера ввода по размеру пролета

javascript jquery html css

45 просмотра

2 ответа

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

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

Вот моя скрипка:

FIDDLE

Вот HTML-код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">    </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table>
  <tr>
    <th  class="col-xs-6">Name</th>
    <th  class="col-xs-2" >Value</th>
  </tr>
  <tr>
    <td><span id="s1" class="editable-span col-xs-6">John</span>
    </td>
    <td>
      <span id="s2" class="editable-span col-xs-2">2345</span>
    </td>
  </tr>
  <tr>
    <td>
      <span id="s3" class="editable-span col-xs-2">Dave</span>
    </td>
    <td>
      <span id="s4" class="editable-span col-xs-2">5678</span>
    </td>
  </tr>
  <tr>
    <td>
      <span id="s5" class="editable-span col-xs-12 col-md-8">Sarah</span>
    </td>
    <td><span id="s6" class="editable-span col-xs-2">1987</span></td>
  </tr>
</table>
<button id="edit_properties" class="col-xs-2">Edit</button>
<button id="unedit_properties" class="col-xs-2">Save</button>

И JavaScript:

$("#edit_properties").on("click", function() {
$('.editable-span').replaceWith(function() {
return $("<input>", {
  val: $(this).text(),
  type: "text",
  id: this.id,
  class: 'editable-input'
  });
 });
});

$("#unedit_properties").on("click", function() {
$('.editable-input').replaceWith(function() {
return $("<span>", {
  text: this.value,
  id: this.id,
  class: 'editable-span'
  });
 });
});
Автор: laker001 Источник Размещён: 08.11.2019 11:26

Ответы (2)


1 плюс

Класс "col-xs-6" отсутствует при сохранении:

$("#edit_properties").on("click", function() {
  $('.editable-span').replaceWith(function() {
    return $("<input>", {
      val: $(this).text(),
      type: "text",
      id: this.id,
      class: 'editable-input'
    });
  });
});

$("#unedit_properties").on("click", function() {
  $('.editable-input').replaceWith(function() {
    return $("<span>", {
      text: this.value,
      id: this.id,
      class: 'editable-span'
    });
  });
});

Обновленная скрипка: http://jsfiddle.net/ersamrow/2D9FW/197/

Автор: Govind Samrow Размещён: 20.08.2016 02:39

-1 плюса

Попробуйте установить высоту и ширину пролета и ввода ---

span
{
width:100px;
height:20px;
padding:2px;}
input
{
width:100px;
height:20px;
padding:2px;
}
Автор: bhupesh Размещён: 20.08.2016 02:47
Вопросы из категории :
32x32