javascript - Asp.Net MVC Javascript 创建条码问题
问题描述
在我共享代码的示例中,我列出了模型中的数据。我还使用 javascript 从模型附带的条形码编号生成条形码图像。但是,只有第一个结果是生成条形码图像。其他行的条码图像为空。如何在 Javascript 中进行更改?
@using BarcodeViewer.Models
@using System.Collections.Generic
@model List<PrintModel>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML EAN13 Barcode</title>
<script src="~/js/connectcode-javascript-ean13.js"></script>
<style type="text/css">
#barcode {
font-weight: normal;
font-style: normal;
line-height: normal;
sans-serif;
font-size: 12pt
}
</style>
</head>
<body>
@foreach (var m in Model)
{
<div>
<table style="width:300px">
<tr>
<td></td>
<td></td>
<td><b>Tarih</b> </td>
<td>@m.Tarih.ToShortDateString()</td>
</tr>
<tr>
<td><b>Gönderen</b></td>
<td colspan="3">@m.Gonderen</td>
</tr>
<tr>
<td><b>Alıcı<b></td>
<td colspan="3">@m.Alici</td>
</tr>
<tr>
<td><b>İl</b></td>
<td>@m.City</td>
<td><b>İlçe</b></td>
<td>@m.Town</td>
</tr>
<tr>
<td><b>Miktar</b></td>
<td>@m.Quantity</td>
<td><b>Birim</b></td>
<td>@m.Birim</td>
</tr>
<tr>
<td><b>Stok Adı:</b></td>
<td colspan="3">@m.StokAdi</td>
</tr>
</table>
<div id="barcodecontainer" style="width:3in; align-content:flex-start" >
<div id="barcode">@m.Barcode</div>
</div>
</div>
<br />
}
<script type="text/javascript">
/* <![CDATA[ */
function get_object(id) {
var object = null;
if (document.layers) {
object = document.layers[id];
} else if (document.all) {
object = document.all[id];
} else if (document.getElementById) {
object = document.getElementById(id);
}
return object;
}
get_object("barcode").innerHTML = DrawHTMLBarcode_EAN13(get_object("barcode").innerHTML, "yes", "in", 0, 2.5, 1, "bottom", "center", "", "black", "white");
/* ]]> */
</script>
</body>
</html>
解决方案
因为您正在id
为多个元素使用一个属性。id
标签在 DOM 中必须是唯一的。getElementById
只会返回给定的第一个元素id
。
尝试使用 aclass
而不是 anid
并将您的 javascript 代码更新为“为类的每个元素实例运行”。
不要在该循环中使用 id 属性。(id="条码容器", id="条码")
<div class="barcode"></div>
和js:
var barcodeElements = document.getElementsByClassName("barcode");
for(var i = 0; i < barcodeElements.length; i++) {
barcodeElements[i].innerHTML = DrawHTMLBarcode_EAN13(barcodeElements[i].innerHTML);
}
但是你最好使用jQuery而不是这个 js 代码。
jQuery 库: https ://barcode-coder.com/en/barcode-jquery-plugin-201.html
这是您的代码的用法:
HTML:
<div class="barcode" data-code="@m.Barcode"></div>
JS:
$(".barcode").each(function(){
$(this).barcode($(this).attr('data-code'), "ean13");
});
推荐阅读
- c# - 如何修复 System.TypeInitializationException:运行时错误?
- html - 匹配锚点和 div 悬停状态的选择器与超链接不匹配
- python - 将列表匹配到 dict 然后循环、存储和显示
- python - 使用 PyGObject 右键单击上下文菜单
- vue.js - Vuetify & Vue - 无法读取未定义的属性“rtl”
- r - R:如何用不同的功能总结多个变量?
- parsing - 使用 DNSJava 解析 Verisign COM 区域文件
- c - rand() 函数每次 C 产生相同的输出
- flextable - 将 flextable 导出为 html
- c# - Visual Studio 2017 编译 .core dll 大小为 0 字节