Как изменить тип столбца HTML с помощью Javascript - PullRequest
Новая
       6

Как изменить тип столбца HTML с помощью Javascript

0 голосов
/ 20 февраля 2020

В моем коде есть 3 проблемы:

  1. Бесконечно, пока l oop Я не понимаю почему, я просто пытаюсь проверить, является ли подсказка числом или нет ( Если нет -> Запрашивать еще раз, пока это не так) [решено]

  2. Если минимальные / максимальные значения верны, их следует добавить ко всем ячейкам из этого столбца

From: <input type=text...

To: <input type=number min=... max=...

В настоящее время они даже не добавляются, и тип действительно преобразуется в число, но для полной таблицы, а не для этот указанный столбец c, который явно не является тем, что я хочу. Когда я нажимаю кнопку «nbr» из указанного столбца указанного c, преобразуем все типы ячеек из этого столбца из текста в nbr ( и добавьте к нему минимальное и максимальное значения) [решено]

Когда я нажимаю эту кнопку «nbr», она меняет все поля ввода из всех таблиц из текстовых полей в числовые поля. Я пытаюсь только изменить текстовые поля из этого столбца в поля "nbr", только этот столбец. [Решено]

Эта часть не работает должным образом: 

//change column type to number
  $('body').on('click', '.nbr-col', function(event) {
    // ...
    // Here I'm trying to add the min attribute to all the number fields from that specific column
    $('input[type=\'number\']', event.delegateTarget).prop('min',($('#min').val()));

    // Here I'm trying to add the max attribute to all the number fields from that specific column
    $('input[type=\'number\']', event.delegateTarget).prop('max',($('#max').val()));

    // Here I'm trying to convert all the text fields to number fields for that specific column (it kinda works, but it converts all the text fields from all the table to number fields, that's not what I want to do
    $('input', event.delegateTarget).prop('type','number');
  });

Таким образом, результат должен быть (например):

  • Создайте столько столбцов и строк, сколько хотите

  • Нажмите кнопку "nbr" из столбца 2

  • Должен преобразовать все текстовые поля из столбца 2 в числовые поля:

Преобразовать это: 

<td><input type="text" class="form-control"></td>

В это: 

<td><input type='number' min=value_from_prompt max=value_from_prompt class="form-control"></td>

Для каждой ячейки из столбец 2

Вот картинка: nbr нажмите, чтобы преобразовать все в "число" из всей таблицы, а не только в рассматриваемый столбец

Вот полная кодовая скрипка : https://jsfiddle.net/wh9y05qt/

Вот мой полный фрагмент кода: 

// Code goes here

$(document).ready(function() {
  // add row
  $('body').on('click', '.add-row', function() {
    var tr = $(this).parents('.table-content').find('.table tbody tr:last');
    if (tr.length > 0) {
      var clone = tr.clone();
      clone.find(':text').val('');
      tr.after(clone);
    } else {
      var cols = $(this).closest('.table-content').find('th').length,
        tr0 = $('<tr/>');
      tr0.html('<td><span class="remove remove-row">x</span></td><td> <input type="text" class="form-control"> </td>');
      for (var i = 2; i < cols; i++) {
        tr0.append('<td> static element </td>')
      }
      $(this).closest('.table-content').find('.table tbody').append(tr0);
      //$(this).closest('.table-content').find('.table tbody').append('<tr> <td><span class="remove remove-row">x</span></td><td> <input type="text" class="form-control"> </td><td> static element </td><td> static element </td></tr>');
    }
  });

  // delete row
  $('body').on('click', '.remove-row', function() {
    $(this).parents('tr').remove();
  });

  // add column
  $('body').on('click', '.add-col', function() {
    $(this).parent().find('.table thead tr').append('<th><input type="text" class="form-control pull-left" value=""> <span class="pull-left remove remove-col">x</span> <span class="pull-left text text-col">text</span> <span class="pull-left nbr nbr-col">nbr</span> </th>');
    $(this).parent().find('.table tbody tr').append('<td><input type="text" class="form-control"></td>');
  });
  
  // change column type to text
  $('body').on('click', '.text-col', function(event) {
    // Get index of parent TD among its siblings (add one for nth-child)
    //var ndx = $(this).parent().index() + 1;
    // Find all TD elements with the same index
    $('input', event.delegateTarget).prop('type','text');
  });
  
  // change column type to number
  $('body').on('click', '.nbr-col', function(event) {
  	// Get index of parent TD among its siblings (add one for nth-child)
    //var ndx = $(this).parent().index() + 1;
    // Find all TD elements with the same index
    var filter = /^[0-9]*$/g;
    var cond = false;
    var min = prompt('Valeur minimum :');
    while (cond == false)
    {
    	if (min.match(filter))
      {
      	cond = true;
      }
      else {
      	var min = prompt('Valeur minimum incorrect, réessayez :');
      }
    }
    
    var cond = false;
    var max = prompt('Valeur maximum :');
    while (cond == false)
    {
    	if (max.match(filter))
      {
      	cond = true;
      }
      else {
      	var max = prompt('Valeur maximum incorrect, réessayez :');
      }
    }
   	$('input[type=\'number\']', event.delegateTarget).prop('min',($('#min').val()));
    $('input[type=\'number\']', event.delegateTarget).prop('max',($('#max').val()));
    $('input', event.delegateTarget).prop('type','number');
  });


  // remove column
  $('body').on('click', '.remove-col', function(event) {
    // Get index of parent TD among its siblings (add one for nth-child)
    var ndx = $(this).parent().index() + 1;
    // Find all TD elements with the same index
    $('th', event.delegateTarget).remove(':nth-child(' + ndx + ')');
    $('td', event.delegateTarget).remove(':nth-child(' + ndx + ')');
  });
});
/* Styles go here */

.table-content {
  padding: 20px;
}
.remove {
  margin-left: 10px;
  color: red;
}
.remove:hover {
  cursor: pointer;
}

.text {
  margin-left: 10px;
  color: blue;
}
.text:hover {
  cursor: pointer;
}

.nbr {
  margin-left: 10px;
  color: green;
}
.nbr:hover {
  cursor: pointer;
}
.form-control {
  width: 90px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <div class="table-content">
      <button class="btn btn-link add-col">Add Column</button>
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th></th>
              <th>Define</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="remove remove-row">x</span></td>
              <td>
                <input type="text" class="form-control">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <button class="btn btn-link add-row">Add row</button>
    </div>

1 Ответ

0 голосов
/ 21 февраля 2020

Прочитав этот длинный вопрос, вы действительно хотите просто выбрать все входные данные из второго td тела таблицы и установить min, max и type="number", если это так, то я думаю, вот что вам нужно: 

$(".table tbody tr td:nth-child(3) input")

проверьте ниже фрагмент, это то, что вам нужно? 

$(document).ready(function() {
  // add row
  $('body').on('click', '.add-row', function() {
    var tr = $(this).parents('.table-content').find('.table tbody tr:last');
    if (tr.length > 0) {
      var clone = tr.clone();
      clone.find(':text').val('');
      tr.after(clone);
    } else {
      var cols = $(this).closest('.table-content').find('th').length,
        tr0 = $('<tr/>');
      tr0.html('<td><span class="remove remove-row">x</span></td><td> <input type="text" class="form-control"> </td>');
      for (var i = 2; i < cols; i++) {
        tr0.append('<td> static element </td>')
      }
      $(this).closest('.table-content').find('.table tbody').append(tr0);
    }
  });

  // delete row
  $('body').on('click', '.remove-row', function() {
    $(this).parents('tr').remove();
  });

  // add column
  $('body').on('click', '.add-col', function() {
    $(this).parent().find('.table thead tr').append('<th><input type="text" class="form-control pull-left" value=""> <span class="pull-left remove remove-col">x</span> <span class="pull-left text text-col">text</span> <span class="pull-left nbr nbr-col">nbr</span> </th>');
    $(this).parent().find('.table tbody tr').append('<td><input type="text" class="form-control"></td>');
  });

  // change column type to text
  $('body').on('click', '.text-col', function(event) {
    $('input', event.delegateTarget).prop('type', 'text');
  });

  // change column type to number
  $('body').on('click', '.nbr-col', function(event) {
    var filter = /^[0-9]*$/g;
    var cond = false;
    var min = prompt('Valeur minimum :');
    while (cond == false) {
      if (min.match(filter)) {
        cond = true;
      } else {
        var min = prompt('Valeur minimum incorrect, réessayez :');
      }
    }

    var cond = false;
    var max = prompt('Valeur maximum :');
    while (cond == false) {
      if (max.match(filter)) {
        cond = true;
      } else {
        var max = prompt('Valeur maximum incorrect, réessayez :');
      }
    }
    let colToModify = $(this).parent().index() + 1;
    let inputsCol = $(".table tbody tr td:nth-child(" + colToModify + ") input")
    inputsCol.attr("type", "number").prop("min", min).prop("max", max)
    console.log("modified columns index: " + colToModify)
  });

  // remove column
  $('body').on('click', '.remove-col', function(event) {
    var ndx = $(this).parent().index() + 1;
    $('th', event.delegateTarget).remove(':nth-child(' + ndx + ')');
    $('td', event.delegateTarget).remove(':nth-child(' + ndx + ')');
  });
});
/* Styles go here */

.table-content {
  padding: 20px;
}

.remove {
  margin-left: 10px;
  color: red;
}

.remove:hover {
  cursor: pointer;
}

.text {
  margin-left: 10px;
  color: blue;
}

.text:hover {
  cursor: pointer;
}

.nbr {
  margin-left: 10px;
  color: green;
}

.nbr:hover {
  cursor: pointer;
}

.form-control {
  width: 90px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="table-content">
  <button class="btn btn-link add-col">Add Column</button>
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th></th>
          <th>Define</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span class="remove remove-row">x</span></td>
          <td>
            <input type="text" class="form-control">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="btn btn-link add-row">Add row</button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...