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

Question

There is 3 issues in my code:

1. Infinite while loop I dont understand why, I'm just trying to test if the prompt is a number or not (If not -> Prompt again until it is) [SOLVED]

2. If min/max are correct, they should be added to all the cells from that column

From : <input type=text...

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

Currently, they are not even added and the type is indeed converted to number but for the full table, not for that specific column, which is not what I want obviously What I want is to, when I press that "nbr" button from that specific column, convert all the cells' type from that column from text to nbr (and add min and max values to it) [SOLVED]

3. When I press that "nbr" button, it changes all the input fields from all the tables from text fields into number fields. What I'm trying to do is only changing the text fields from that column into "nbr" fields, only that column. [SOLVED]

This is the part that doesn't work as intended :

//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');
  });

So the result should be (for example) :

• Create as much columns and rows as I want

• Press the "nbr" button from column 2

• Should convert all the text fields from column 2 into number fields :

Convert this :

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

To this :

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

For each cells from column 2

Here is a picture : nbr press converting all the into "number" from all the table, not only the column in question

Here's a full code fiddle: https://jsfiddle.net/wh9y05qt/

Here's my full code snippet :

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

After reading this long question, that what you really want is to just select all inputs from second td of the table body and set min , max and type="number" , if is this, then I think that what you need is:

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

check below snippet, is it what you need?

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