通过电话通过对象搜索Java数据并显示在表中

Question

在输入键盘上，Js从JSON对象获取数据并在html表格中显示数据我需要帮助：

1：按电话排序数据并仅显示具有输入数字的表行，并隐藏其他]]

2：在单击表上的行

->打开模式，在那里我要显示其他数据{“ card_number”：“ 1234 1234 4444 5555”，“ anydata”：“ something”，“ anydata2”：“ hello res中的“}，它完全属于此对象，并且具有电话号码

这是我的代码：

function SearchPhone() {
  var phone = $('#phonesearch').val();
  var res = {
    "2": {
      "name": "Sardor",
      "surname": "Aliev",
      "patronym": "Begmatovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "2",
      "phone": "85673454534",
      "card_number": "1234 1234 4444 5555",
      "anydata": " something ",
      "anydata2": "hello"

    },
    "3": {
      "name": "Akbar",
      "surname": "Valiev",
      "patronym": "Sharipovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "2",
      "phone": "85672312335",
      "card_number": "1234 6543 4444 5555",
      "anydata": " something ",
      "anydata2": "hello"
    },
    "4": {
      "name": "Mansur",
      "surname": "Bakirov",
      "patronym": "Maksutovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "1",
      "phone": "85657652311",
      "card_number": "1234 6543 1111 5535",
      "anydata": " something ",
      "anydata2": "hello"
    },
    "5": {
      "name": "Xamid",
      "surname": "Saliev",
      "patronym": "Aripovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "4",
      "phone": "85672115535",
      "card_number": "1234 2353 5444 2345",
      "anydata": " something ",
      "anydata2": "hello"
    },
    "6": {
      "name": "Bobur",
      "surname": "Qobilov",
      "patronym": "Axmetovich",
      "date_pub": "12.02.2019",
      "date_get": "12.03.2019",
      "status": "3",
      "phone": "85672612664",
      "card_number": "1287 3853 4734 5475",
      "anydata": " something ",
      "anydata2": "hello"
    }
  };
  var sttr = '<tr class="" style="cursor: pointer;" data-toggle="modal" data-target="#myModal1"><th  scope="row" id="listnum_fp">';
  endtr = '</tr>';
  stth = '<th style="white-space: nowrap">';
  endth = '</th>';
  sttd = '<td style="white-space: nowrap">';
  endtd = '</td>';
  for (const key in res) {

    var f_i_sh = stth + res[key].surname + ' ' + res[key].name + ' ' + res[key].patronym + '' + endth;
    publicated = sttd + res[key].date_pub + endtd;
    willget = sttd + res[key].date_get + endtd;
    status = sttd + res[key].status + endtd;
    phone = sttd + res[key].phone + endtd;
    datarowout = sttr + (key - 1) + f_i_sh + publicated + willget + status + phone + endtr;
    document.getElementById('cardmod_fp').innerHTML += datarowout;

  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-lg table-bordered shadow bg-light ">
    <thead>
      <tr>
        <div class="card-header text-right">
          <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3">
              Phone input: <input id="phonesearch" onkeyup="SearchPhone()" type="text" class="form-control">
            </div>
          </div>

        </div>

        <tr>
          <th style="width: 40px;" scope="col">№</th>
          <th scope="col">Name</th>
          <th scope="col">Post Date</th>
          <th scope="col">Get Date</th>
          <th scope="col">Status</th>
          <th scope="col">Phone number</th>
        </tr>
    </thead>

    <tbody id="cardmod_fp">

    </tbody>
  </table>
</div>


<div class="modal resizable draggable fade" data-backdrop="false" id="myModal1" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content rounded-0 shadow-lg">
      <div class="modal-header bg-light">
        <button type="button" class="close" data-dismiss="modal">&times;</button>

      </div>
      <div class="modal-body">
        <p class="moredata"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-refuse " data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-default " data-dismiss="modal">Send</button>
      </div>
    </div>
  </div>
</div>

在输入键盘上，Js从JSON对象获取数据并在html表中显示数据，我需要帮助：1：通过电话对数据进行排序，仅显示具有输入数字的表行，并隐藏...

Answer 1

首先将资源移到搜索之外，然后在输入时清除

这里是工作版本

Answer 2

我已通过一些简单的必需更改和一些更好的准则（但不完全）修改了您的代码，并在必要的地方添加了注释，以更好地理解。