无法通过 JavaScript 警报显示 HTML 动态表中的文本

Question

 function DataBind(dataList) {

        alert('working' + dataList.length);

        var SetData = $("#setdata");

        SetData.empty();

        for (var a = 0; a < dataList.length; a++) {

            var data = "<tr >" +

                "<th>" + dataList[a].Item_code + "</th>" +

                "<th id='ItmNm'>" + dataList[a].Item_Name + "</th>" +

                "<th>1</th> <th><button type='button'  onclick='addItem(" + dataList[a].Item_code + ")' class='btn btn-primary'> <span class='glyphicon glyphicon-plus'/></button> <button type='button'  class='btnSelect'  class='btn btn-primary'> <span class='glyphicon glyphicon-minus'/></button></th>"

                + "</tr>";

            // alert(dataList[a].Acc_Cd);

            SetData.append(data);

        }

    }

 function addItem(val) {

        //var theTbl = document.getElementById("myTable");

        //for (var i = 0; i < theTbl.length; i++) {

        //    for (var j = 0; j < theTbl.rows[i].cells.length; j++) {

        //        theTbl.rows[i].cells[j] = alertInnerHTML;

        //    }

        //}

                alert(val);

                var table2 = $("#setfinaldata");

                table2.empty();

                var Newdata = "<tr>" +

                          "<th>" + val + "</th>" +

                          "<th> 1 </th>" +

                          "<th>1</th>"

                          + "</tr>";

                table2.append(Newdata);

    }

在此代码变量 val 显示警报时的项目代码但未显示项目名称

Answer 1

您需要在调用 addItem 方法时传递项目名称，请参阅下面的代码function DataBind(dataList) {&nbsp; &nbsp; &nbsp; &nbsp; alert('working' + dataList.length);&nbsp; &nbsp; &nbsp; &nbsp; var SetData = $("#setdata");&nbsp; &nbsp; &nbsp; &nbsp; SetData.empty();&nbsp; &nbsp; &nbsp; &nbsp; for (var a = 0; a < dataList.length; a++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var data = "<tr >" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<th>" + dataList[a].Item_code + "</th>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<th id='ItmNm'>" + dataList[a].Item_Name + "</th>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<th>1</th> <th><button type='button'&nbsp; onclick=\"addItem('" + dataList[a].Item_code + "','" + dataList[a].Item_Name + "')\" class='btn btn-primary'> <span class='glyphicon glyphicon-plus'/></button> <button type='button'&nbsp; class='btnSelect'&nbsp; class='btn btn-primary'> <span class='glyphicon glyphicon-minus'/></button></th>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + "</tr>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // alert(dataList[a].Acc_Cd);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SetData.append(data);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;function addItem(val, name) {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Code = " + val + " and Name = " + name);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var table2 = $("#setfinaldata");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table2.empty();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var Newdata = "<tr>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<th>" + val + "</th>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<th> 1 </th>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<th>1</th>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + "</tr>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table2.append(Newdata);&nbsp; &nbsp; }

Answer 2

你可以试试我创建的这个例子也参考这个链接点击这里<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="zui-table">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>ItemCode</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Action</th>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody class="jsTableBody">&nbsp; &nbsp; </tbody></table><script>$(document).ready(function(){&nbsp;var dataList = [];&nbsp;dataList.push({&nbsp;Item_code : 1,&nbsp;Item_Name : "A"&nbsp;},{&nbsp;Item_code : 2,&nbsp;Item_Name : "B"&nbsp;},{&nbsp;Item_code : 3,&nbsp;Item_Name : "C"&nbsp;});&nbsp;var oHtml=[];&nbsp;for(var i=0;i<dataList.length;i++)&nbsp;{&nbsp;oHtml.push("<tr>");&nbsp;oHtml.push("<td>");&nbsp;oHtml.push(dataList[i].Item_code);&nbsp;oHtml.push("</td>");&nbsp;oHtml.push("<td>");&nbsp;oHtml.push(dataList[i].Item_Name);&nbsp;oHtml.push("</td>");&nbsp;oHtml.push("<td>");&nbsp;&nbsp;oHtml.push("<button onclick='addItem("+dataList[i].Item_code+",\""+dataList[i].Item_Name+"\");' class='jsButton'>Add</button>");&nbsp;&nbsp;oHtml.push("</td>");&nbsp;oHtml.push("</tr>");&nbsp;}&nbsp;$(".jsTableBody").html(oHtml.join(" "));})function addItem(data){&nbsp;alert(data);}</script>