Question

我想根据变量在运行时指定的值，在按钮点击时使用json数据填充我的html表，它的工作正常，第一次单击＆＃34; go＆＃34;按钮但后者不起作用。我在代码中标记了注释，直到其工作。

＆＃13;

	var multicompanyUseCaseData="";
	var orderConditionData="";
	var orderTypeData="";

  $(document).ready(function() {
		$("#report").hide();
		$("#orderGraph").hide();
		$("#profitGraph").hide();
    //populate with json data on button click
		$("#go").click(function() {
				$("#orderGraph").show();
				$("#profitGraph").show();
				loadGraphOrderFilter();
				loadGraphProfitFilter();
				$("#report").show();
				$("#datatable > tbody > tr").remove();
			var e;
			if(document.getElementById("mcuc_selection"))
			{
				e=document.getElementById("mcuc_selection");
				multicompanyUseCaseData = e.options[e.selectedIndex].text;
			}
			if(document.getElementById("oc_selection"))
			{			
				e = document.getElementById("oc_selection");
				orderConditionData = e.options[e.selectedIndex].text;
			}
			if(document.getElementById("ot_selection"))
			{
				e = document.getElementById("ot_selection");
				orderTypeData = e.options[e.selectedIndex].text;
			}

          //At second click on button the code doesn't works after it.
			response1 = $.parseJSON(response1);


    $.each(response1, function (i, item) {
	if( item.useCase == multicompanyUseCaseData || item.orderCondition == orderConditionData || item.orderType == orderTypeData )
	{
        $('<tr>').append(
        $('<td>').text(item.orderId),
        $('<td>').text(item.purchaseId),
        $('<td>').text(item.shipmentId),
        $('<td>').text(item.useCase),
        $('<td>').text(item.orderCondition),
        $('<td>').text(item.orderType)).appendTo('#datatable');
	}
	

});

    $(document).ready(function() {
        var handleDataTableButtons = function() {};

        TableManageButtons = function() {
          "use strict";
          return {
            init: function() {
              handleDataTableButtons();
            }
          };
        }();

        $('#datatable').dataTable();
        $('#datatable-keytable').DataTable({
          keys: true
        });

        $('#datatable-responsive').DataTable();

        $('#datatable-scroller').DataTable({
          ajax: "js/datatables/json/scroller-demo.json",
          deferRender: true,
          scrollY: 380,
          scrollCollapse: true,
          scroller: true
        });

        var table = $('#datatable-fixed-header').DataTable({
          fixedHeader: true
        });

        TableManageButtons.init();
      });
	  
	$(document).ready(function(e) {
		$("#myButton").click(function(e){
				$("#datatable").table2excel({
					name: "Excel Document Name",
					filename: "McosData",
					fileext: ".xls",
					exclude_img: true,
					exclude_links: true,
					exclude_inputs: true
				});
			});		
			});
  });
	});

＆＃13;

var response1 = '[{"orderId":"19", "purchaseId":"Alon", "shipmentId":"5", "useCase":"AGS", "orderCondition":"2", "orderType":"Customer" }';
response1 += ',{"orderId":"19", "purchaseId":"Alon", "shipmentId":"5", "useCase":"AGL", "orderCondition":"2", "orderType":"Customer" }';
response1 += ',{"orderId":"19", "purchaseId":"Alon", "shipmentId":"5", "useCase":"NAFN", "orderCondition":"2", "orderType":"Customer" }]';


//button click to load json data for the table
<button id="go" type="submit" value="Submit" >Go</button>


//table to be populated with json data
             <div id="report" class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel" id="report_layout">
                  <div class="x_title">
				  	<button id="myButton">Excel</button>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <table id="datatable" class="table table-striped table-bordered">
                      <thead>
					<tr>
						<th>Order Id</th>
						<th>Shipment Id</th>
						<th>Purchase Id</th>
						<th>Use Case</th>
						<th>Order Condition</th>
						<th>Order Type</th>
					</tr>
									  </thead>


                      <tbody>

                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

＆＃13;

Answer 1

您正在解析每次点击时的JSON字符串。第一次单击后，它已经被解析，因此response1不是有效的JSON string，它现在是一个对象。更改变量的名称，它不会覆盖您传入的字符串。

var responseObject = $.parseJSON(response1);
$.each(responseObject, function (i, item) {
    // ...
});

Attempted a plunker for organization only, won't work without libraries

在按钮单击时使用不同的json数据动态填充html表

1 个答案: