在javascript中，jquery html表在通过js追加时不会显示

时间：2016-11-01 08:42:21

标签： javascript jquery html

我通过js在表体中附加数据，但在getInvManhistory()中调用docment.ready()方法时，它会显示带有附加数据的表格，但当我将其称为onClick搜索按钮时，它会显示空白的表。我调试了数据在开始时附加的代码，但最后它变成了空白。

预先谢谢。请帮忙。

＆＃13;
＆＃13; 
var invsorno = "";
$(document).ready(function() {
  // getInvManhistory(); When calling here the table gets displayed.

  $("#search").click(function() {
    alert("searchs");
    getInvManhistory(); //when calliung with search button table is shown empty
  });
  // get_workflow_history();
});

function getInvManhistory() {
  var tablebody = "";
  invsorno = $("#invSrNo").val(),
    $.cordys.ajax({
      method: 'SearchInvManDetails',
      parameters: {
        invseqno: invsorno,
        invtype: "",
        FromDate: "",
        ToDate: "",
      },
      async: false,
      cache: false,
      dataType: 'json',
      namespace: 'http://schemas.cordys.com/IM_DBMetaData',
      success: function(response) {
        if ($.isArray(response.tuple)) {
          var workflow_len = response.tuple.length;
          for (var i = 0; i < workflow_len; i++) {
            tablebody += "<tr>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
              "</tr>";
          }
        } else if ($.isEmptyObject(response.tuple)) {
          tablebody += "<tr align='center'>" +
            "<td colspan='6' style='color:red;font-weight:bold;'>Data Not Found</td>" +
            "</tr>";
        } else {
          tablebody += "<tr>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
            "</tr>";
        }
        $('#searchdetails tbody').html("");
        $('#searchdetails tbody').append(tablebody);
      }
    });
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">

  <link href="../JavaSources_CustomLibrary/jquery-ui-1.10.4.custom/css/base/jquery-ui-1.10.4.custom.css" rel="stylesheet">
  <script src="../JavaSources_CustomLibrary/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
  <script src="../JavaSources_CustomLibrary/jquery-ui-1.10.4.custom/js/jquery-ui.min.js"></script>
  <script src="/cordys/thirdparty/jquery/jquery.js" type="text/javascript"></script>
  <script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"></script>
  <script src='../IM_JSFiles/IM_Search.js' type='text/javascript'></script>
  <title>Search</title>
</head>

<style>
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<body>
  <div style="width: 60%; border: 1px solid gray; margin: 0 auto; overflow: hidden; background-color: gainsboro;">

    <div>
      <h3 style="background-color: red;text-align: left;color: #FFF;padding: 5px;">Investment Management Search Screen</h3>
      <div style="width: 60%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
        <form class="form-inline">
          <div style="width: 100%; padding: 10px 0px;">
            <div class="form-group" style="width: 48%;">
              <label for="invSrNo" style="width: 125px;">Inv Sr. No:</label>
              <input id="invSrNo" name="imInvSrNo" type="text">
            </div>
            <div class="form-group" style="width: 48%;">
              <label for="investmentType" style="width: 125px;">Investment Type:</label>
              <input id="investmentType" name="imInvestmentType" type="text">
            </div>
          </div>
          <div style="width: 100%; padding: 10px 0px;">
            <div class="form-group" style="width: 48%;">
              <label for="fromDate" style="width: 125px;">From Date:</label>
              <input id="fromDate" name="imFromDate" type="date">
            </div>
            <div class="form-group" style="width: 48%;">
              <label for="toDate" style="width: 125px;">To Date:</label>
              <input id="toDate" name="imToDate" type="date">
            </div>
          </div>
          <div style="width: 100%; padding: 10px 0px;">

            <div class="form-group" style="float: right;margin-right: 42px;">

              <button id="search" class="btn btn-danger btn-md">Search</button>
              <button id="view" class="btn btn-danger btn-md">View</button>
            </div>
          </div>

        </form>
      </div>
      <div style="width: 100%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
        <table style="width: 100%" id="searchdetails">

          <thead>
            <tr style="background-color: red; color: #FFF;">
              <th>Inv Sr.No</th>
              <th>Initiator Name</th>
              <th>Department</th>
              <th>Role</th>
              <th>Source WBC Code</th>
              <th>Target WBC Code</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody></tbody>

        </table>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

问题是你正在使用jquery selector $而不是在代码中引用jquery所以我只是在代码中添加jquery引用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

这是完整的工作代码

<!DOCTYPE html>
 <html>
<head>
<style>
th,
  td {
padding: 5px;
border: 1px solid black;
 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script>
  var invsorno = "";
 $(document).ready(function() {
 // getInvManhistory(); When calling here the table gets displayed.

$("#search").click(function() {
 alert("searchs");
getInvManhistory(); //when calliung with search button table is shown empty
 });
          // get_workflow_history();
   });

  function getInvManhistory() {
 var tablebody = "";
 invsorno = $("#invSrNo").val(),
  $.cordys.ajax({
  method: 'SearchInvManDetails',
  parameters: {
    invseqno: invsorno,
    invtype: "",
    FromDate: "",
    ToDate: "",
  },
  async: false,


cache: false,
  dataType: 'json',
  namespace: 'http://schemas.cordys.com/IM_DBMetaData',
  success: function(response) {
    if ($.isArray(response.tuple)) {
      var workflow_len = response.tuple.length;
      for (var i = 0; i < workflow_len; i++) {
        tablebody += "<tr>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
          "</tr>";
      }
    } else if ($.isEmptyObject(response.tuple)) {
      tablebody += "<tr align='center'>" +
        "<td colspan='6' style='color:red;font-weight:bold;'>Data Not Found</td>" +
        "</tr>";
    } else {
      tablebody += "<tr>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
        "</tr>";
    }
    $('#searchdetails tbody').html("");
    $('#searchdetails tbody').append(tablebody);
  }
});
 }
 </script>
</head>
<body>   <div style="width: 60%; border: 1px solid gray; margin: 0 auto; overflow:    hidden; background-color: gainsboro;">

<div>
  <h3 style="background-color: red;text-align: left;color: #FFF;padding: 5px;">Investment Management Search Screen</h3>
  <div style="width: 60%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
    <form class="form-inline">
      <div style="width: 100%; padding: 10px 0px;">
        <div class="form-group" style="width: 48%;">
          <label for="invSrNo" style="width: 125px;">Inv Sr. No:</label>
          <input id="invSrNo" name="imInvSrNo" type="text">
        </div>
        <div class="form-group" style="width: 48%;">
          <label for="investmentType" style="width: 125px;">Investment Type:</label>
          <input id="investmentType" name="imInvestmentType" type="text">
        </div>
      </div>
      <div style="width: 100%; padding: 10px 0px;">
        <div class="form-group" style="width: 48%;">
          <label for="fromDate" style="width: 125px;">From Date:</label>
          <input id="fromDate" name="imFromDate" type="date">
        </div>
        <div class="form-group" style="width: 48%;">
          <label for="toDate" style="width: 125px;">To Date:</label>
          <input id="toDate" name="imToDate" type="date">
        </div>
      </div>
      <div style="width: 100%; padding: 10px 0px;">

        <div class="form-group" style="float: right;margin-right: 42px;">

          <button id="search" class="btn btn-danger btn-md">Search</button>
          <button id="view" class="btn btn-danger btn-md">View</button>
        </div>
      </div>

    </form>
  </div>
  <div style="width: 100%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
    <table style="width: 100%" id="searchdetails">

      <thead>
        <tr style="background-color: red; color: #FFF;">
          <th>Inv Sr.No</th>
          <th>Initiator Name</th>
          <th>Department</th>
          <th>Role</th>
          <th>Source WBC Code</th>
          <th>Target WBC Code</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody></tbody>

    </table>
  </div>
  </div>
 </div>
  </body>
 </html>

屏幕截图： Screen Shot

相关问题
最新问题