无法通过 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) {

        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 + "','" + dataList[a].Item_Name + "')\" 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, name) {  

                alert("Code = " + val + " and Name = " + name);

                var table2 = $("#setfinaldata");

                table2.empty();

                var Newdata = "<tr>" +

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

                          "<th> 1 </th>" +

                          "<th>1</th>"

                          + "</tr>";

                table2.append(Newdata);

    }

Answer 2

你可以试试我创建的这个例子也参考这个链接点击这里

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="zui-table">

    <thead>

        <tr>

            <th>ItemCode</th>

            <th>Name</th>  

             <th>Action</th>  

        </tr>

    </thead>

    <tbody class="jsTableBody">

    </tbody>

</table>

<script>

$(document).ready(function(){

 var dataList = [];

 dataList.push({

 Item_code : 1,

 Item_Name : "A"

 },{

 Item_code : 2,

 Item_Name : "B"

 },{

 Item_code : 3,

 Item_Name : "C"

 });

 var oHtml=[];

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

 {

 oHtml.push("<tr>");

 oHtml.push("<td>");

 oHtml.push(dataList[i].Item_code);

 oHtml.push("</td>");

 oHtml.push("<td>");

 oHtml.push(dataList[i].Item_Name);

 oHtml.push("</td>");

 oHtml.push("<td>"); 

 oHtml.push("<button onclick='addItem("+dataList[i].Item_code+",\""+dataList[i].Item_Name+"\");' class='jsButton'>Add</button>"); 

 oHtml.push("</td>");

 oHtml.push("</tr>");

 }

 $(".jsTableBody").html(oHtml.join(" "));

})

function addItem(data)

{

 alert(data);

}

</script>