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

Question

我的代码中有 3 个问题：

无限while循环我不明白为什么，我只是想测试提示是否是数字（如果不是->再次提示直到它是）[已解决]
如果最小值/最大值正确，则应将它们添加到该列的所有单元格中

从： <input type=text...

至： <input type=number min=... max=...

目前，它们甚至没有被添加，并且类型确实转换为数字，但是对于整个表格，而不是对于那个特定的列，这显然不是我想要的我想要的是，当我按下那个“nbr”按钮时特定列，将该列中的所有单元格类型从文本转换为 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');
  });

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

根据需要创建尽可能多的列和行
按第 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 将所有表格中的所有数字都转换为“数字”，而不仅仅是有问题的列

这是一个完整的代码小提琴：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>

score 0 · Accepted Answer

在阅读了这个长长的问题之后，您真正想要的是从td表体的第二个和 set 中选择所有输入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>

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

1 回答 1

Related

Reference