如何使用 Javascript 更改列的 HTML 类型

Question

我的代码中有 3 个问题：

1. 无限while循环我不明白为什么，我只是想测试提示是否是数字（如果不是 -> 再次提示直到它是）[已解决]

2. 如果最小值/最大值正确，则应将它们添加到该列的所有单元格中

来自： <input type=text...

收件人： <input type=number min=... max=...

目前，它们甚至没有被添加，并且类型确实转换为数字，但是对于整个表，而不是对于那个特定的列，这显然不是我想要的 我想要的是，当我按下该特定列中的“nbr”按钮时，将该列中的所有单元格类型从文本转换为 nbr（并为其添加最小值和最大值）[已解决]

1. 当我按下“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');
  });

所以结果应该是（例如）：

• 根据需要创建尽可能多的列和行

• 按第 2 列中的“nbr”按钮

• 应将第 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 press converting all the into "number" from all the table, not only the column in question

这是一个完整的代码小提琴：https://jsfiddle.net/wh9y05qt/

这是我的完整代码 sn-p：

// 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>

Answer 1

读完这个长问题后，你真正想要的是从表体的第二个td 中选择所有输入并设置min、max 和type="number"，如果是这样，那么我想你需要的是：

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

检查下面的sn-p，是你需要的吗？

$(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>