Question

我对JS和jQuery很陌生，所以如果我说/做些愚蠢的事情，请原谅我。我正在尝试创建一个工具，该工具将使用jQuery和jsBarcode在HTML表格内将表格数据动态转换为条形码。我有一个工作台，但是当我尝试将td转换为条形码时出现错误。我觉得这与操作顺序有关，但我无法弄清楚。这就是我在控制台中看到的内容，单击该按钮后，我的表没有呈现。

Console:JsBarcode.all.min.js:2 Uncaught NoElementException: No element to render on.
    at new e (http://127.0.0.1:61214/JsBarcode.all.min.js:2:9642)
    at j.render (http://127.0.0.1:61214/JsBarcode.all.min.js:2:23674)
    at x (http://127.0.0.1:61214/JsBarcode.all.min.js:2:22568)
    at HTMLButtonElement.<anonymous> (http://127.0.0.1:61214/index4.html:62:19)
    at HTMLButtonElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:10316)
    at HTMLButtonElement.q.handle (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:8343)

JSBarcode需要带有ID的SVG标签，以将文本转换为条形码。像这样：

    <svg id="barcode"></svg>

然后像这样的一些js或jQuery：

    JsBarcode("#barcode", "Hi!");
    // or with jQuery
    $("#barcode").JsBarcode("Hi!");

我确保检查在表中使用jsBarcode库时是否不会中断。我已经将脚本移到HTML的底部，以防万一是操作顺序问题，但我仍然不确定。因此，为什么我在这里！

代码运行正常，并根据表数据成功插入带有正确ID的svg标记。但是一旦我从jSBarcode中插入具有此类适当变量的javascript，它就会中断

    JsBarcode(canvas, currValue);

这是我的代码：

HTML

<html>
<head>
    <title>Dynamic Table</title>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src="JsBarcode.all.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div style="margin-top: 50px; margin-left: 250px; margin-right: 250px;">
    <button>Create Table</button>
    <div id="tableDiv" style="margin-top: 40px">
        Table will gentare here.
    </div>
</div>
<p id="p1"></p>

脚本：

<script>

      var json_obj  = {
          "name":"John",
          "age":30,
          "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda","550" ] }
    ]
 }

//Create table and fetch data from JSON Object.
        $(document).ready(function(){
            $("button").click(function(){
              var number_of_rows = json_obj.cars.length;
              var k = 0;
              var table_body = '<table border="1" id="example"><thead><tr><th>Cars</th><th>Models</th></tr></thead><tbody>';
              for(j in json_obj.cars){
              for(i =0;i<json_obj.cars.length;i++){
                    table_body+='<tr>';
                    table_body +='<td>';
                    table_body +=json_obj.cars[k]["name"];
                    table_body +='</td>';


                    var currVal = json_obj.cars[k].models[i];//pulls data

                    var stringy = JSON.stringify(currVal);    //stringifies data| Needed?
                    var currValue = stringy.replace(/["']/g, "");//removes quotes and creates valid var
                    console.log(currValue);                     //logging
                    var canvas = "#"+currValue;                 //creates id string for svg tags
                    console.log(canvas);                        //logging

                    table_body +='<td><svg id="'+currValue+'"></svg>';//adds svg block to HTML with data specifc id

                    table_body +=json_obj.cars[k].models[i];     //adds data string

                  //JsBarcode(canvas, currValue);//jsBarcode Translation BREAKS CODE HERE!!


                    table_body +='</td>';

                    table_body+='</tr>';
              }
              k++;
            }
          table_body+='</tbody></table>';
          $('#tableDiv').html(table_body);
          //display data..........
    });

});

我的目标是使它根据其中的数据在TD标签中添加条形码。

Answer 1

在您的示例中变量canvas是一个字符串，但是JsBarcode期望使用Element或HTML DOM对象。像这样：

var canvas = document.getElementById(currValue);

或：

var canvas = $('#'+currValue)[0];

不确定是否可以解决您的问题。我不使用jQuery或JsBarcode。

Answer 2

问题似乎是在页面加载完成之前脚本正在运行，因此无法找到具有您指定的 ID 来生成条形码的元素。

将脚本标签（JsBarcode、jQuery）放在底部，即结束正文标签（</body>）之前或在顶部为其添加 defer 属性，以便它仅在页面加载完成后运行然后生成条形码，如下所示：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer>
    </script>
<script src="JsBarcode.all.min.js" defer></script>

如何解决：JsBarcode“没有要渲染的元素。”错误

2 个答案: