Создание таблицы с помощью счетчика

У меня есть следующий код и я пытаюсь получить введенный пользователем номер, чтобы создать это количество строк со счетчиком в ячейках до введенного числа (т. Е. Если пользователь вводит 6, 6 строк появится с 1-6 в них, 1 вверху). Я считаю, что for-loop будет работать хорошо, но я не могу понять, какие переменные работают. Любая помощь будет принята с благодарностью!Создание таблицы с помощью счетчика

$(document).ready(function() { 
 
    $('#nbrTxt').focus(); 
 

 
    var index = 1; 
 
    $('input[name=nbrTxt]').on('keyup', function(e) { 
 
    if (e.which === 13) { 
 
     $('table').append('<tr><td></td><td></td></tr>'); 
 
     $('table tr:last td:first').html($(this).val()); 
 
     $('table tr:last td:last').html(index); 
 
     $(this).focus().select(); 
 
     index++; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 

 
<title> JQuery Selector</title> 
 

 
<style type="text/css"> 
 

 
body { 
 
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
 
    
 
} 
 

 
</style> 
 

 
<script src="jquery-1.11.3.min.js"></script> 
 
<script src="jqueryselector.js"></script> 
 

 
</head> 
 
<body> 
 

 
    <h1>JQuery Selector</h1> 
 

 
Enter Number: 
 
<input type="number" name= "nbrTxt" id="nbrTxt" /> 
 
<input type="button" value="GO" id="btnGo"/> 
 

 
    <table id="table" width="500" border="1"> 
 
    <tr> 
 
    \t <td>No. Count</td> 
 
\t <td>Name</td> 
 
    </tr> 
 
</table> 
 
    
 
</body>

источник

2016-01-09 Rassisland

Попробуйте это. Я просто изменил событие keyup, чтобы щелкнуть, но он должен работать.

$(document).ready(function() { 
    $('#nbrTxt').focus(); 

    $('#btnGo').on('click', function(e) { 
     var value = $('#nbrTxt').val(); 

     for (var i = 1; i <= value; i++) { 
      $('table').append('<tr><td></td><td></td></tr>'); 
      $('table tr:last td:first').html(value); 
      $('table tr:last td:last').html(i); 
     } 
    }); 
});

источник

2016-01-10 00:01:49

Да, вы можете использовать цикл.

$(document).ready(function() { 
 
    $('#nbrTxt').focus(); 
 

 
    $('input[name=nbrTxt]').on('keyup', function(e) { 
 
    var index = parseInt($(this).val()); 
 

 
    if (e.which === 13) { 
 
     for(var i = 1; i <= index; i++) { 
 
     $('table').append('<tr><td>' + i + '</td><td></td></tr>'); 
 
     $(this).focus().select(); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 

 
<title> JQuery Selector</title> 
 

 
<style type="text/css"> 
 

 
body { 
 
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
 
    
 
} 
 

 
</style> 
 

 
<script src="jquery-1.11.3.min.js"></script> 
 
<script src="jqueryselector.js"></script> 
 

 
</head> 
 
<body> 
 

 
    <h1>JQuery Selector</h1> 
 

 
Enter Number: 
 
<input type="number" name= "nbrTxt" id="nbrTxt" /> 
 
<input type="button" value="GO" id="btnGo"/> 
 

 
    <table id="table" width="500" border="1"> 
 
    <tr> 
 
    \t <td>No. Count</td> 
 
\t <td>Name</td> 
 
    </tr> 
 
</table> 
 
    
 
</body>

источник

2016-01-10 00:01:04 juliobetta

Создание таблицы с помощью счетчика

ответ

Смежные вопросы