使用名称标签和徽标多次生成QR码

时间:2018-06-14 06:32:15

标签: javascript jquery html qr-code

我需要生成QR码才能创建ID。

我为ID设计提供了以下div

<div class="row">
    <div class="col-sm-6">
        <table id="tb">
            <tr><th style="font-size: 2em">Name:</th></tr>
            <tr><th style="font-size: 2em">Date of Birth:</th></tr>
            <tr><th style="font-size: 2em" id="qrcode"></th></tr>
        </table>    
    </div>
</div>

我有2个文本框。第一个是指定所需QR的数量,第二个是应该在QR内编码的文本:

<script src="./jquery.min.js"></script>
<script src="./qrcode.min.js"></script>
<script type="text/javascript">
    var total = $("#number_of_card").val();
    var startingFrom = $("#start_number").val();

    while(total!==0)
    {
        $(this).append('tb')

        var codedId = parseInt(total)+parseInt(startingFrom);
        new QRCode(document.getElementById("qrcode"), ""+codedId);
        total--;
    }
</script>

我使用了以下库:QR Code

我需要的是复制所有div,以便生成的每个qr代码都应该有一个名称和出生日期div,这是我无法达到的。

完整的脚本在这里:

https://jsfiddle.net/w2qgbjLf/

1 个答案:

答案 0 :(得分:1)

你的小提琴有一个错误,所以你没有看到QRs,看到这个小提琴。

https://jsfiddle.net/gv9dx1sh/16/

var total = $("#number_of_card").val();
var startingFrom = $("#start_number").val();

    while(total !== 0)
    {
      $('body').append(`<div><div>Name:</div><div>BirthDate</div><div id='qrcode${total}'></div></div>`);
      var codedId = parseInt(total)+ parseInt(startingFrom);
      new QRCode(document.getElementById(`qrcode${total}`), "" + codedId);
      total--;
    }