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

您可以尝试创建的这个示例，也请参考此链接Click here

<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>

Answer 2

您需要在调用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);

    }