在 table 标签中创建元素 href

Question

我正在 Javascript 和 html 中制作应用程序。当您单击按钮 "find contact" 时，您会在应用程序中看到来自您 phone 的所有联系人。然后当你点击一个名字时，你可以呼叫那个人。

这是我用 href 完成的最后一件事，但我希望我的联系人位于彼此下方。现在他们站在一起。另外这个必须改成table.

到目前为止，这是我的代码：

Javascript :

function findContact() {
  var options = new ContactFindOptions();
  options.filter = "";
  options.multiple = true;

  fields = ["displayName", "phoneNumbers"];
  navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

  function contactfindSuccess(contacts) {

    for (var i = 0; i < contacts.length; i++) {
      for (var j = 0; j < contacts[i].phoneNumbers.length; j++) {

        var nummer = contacts[i].phoneNumbers[j].value;
        var jens = contacts[i].displayName;
        var para = document.createElement("a");

        var t = document.createTextNode(jens);
        para.appendChild(t);
        para.title = jens;
        para.href = "tel:" + nummer;
        document.getElementById("abc").appendChild(para);
      }


    }
  }

  function contactfindError(message) {
    alert('Failed because: ' + message);
  }

}

HTML :

<table id="myDIV">
  <tr class="header">
    <th>Naam</th>
  </tr>
  <tr>
    <td id="abc"></td>
  </tr>

</table>

Javascript 搜索功能：

    <script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myDIV");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

Answer 1

编辑 --> 请注意，只有在按下查找联系人按钮后，搜索功能才会起作用。我假设这就是你想要的。干杯

你好我假设你想把所有的联系人都放在一个 td 中。您所要做的就是设置 a 标签的样式，使其一个一个地显示在另一个下方。查看下面的代码。如果这不是您想要的，请告诉我。

此外，我还使用了一个示例 json 对象来显示其中有人 person1 和 person2 的数据，每个人有 2 个和 3 个 phone 数字。

var contacts = [];
 var obj={
 displayName:'abigail',
phoneNumbers:[{value:'xxxxxx'},{value:'yyyyyy'},{value:'zzzzz'}]
 };
 contacts.push(obj);
 obj={
 displayName:'ashley',
phoneNumbers:[{value:'xxxxxx'},{value:'yyyyyy'}]
 };
 contacts.push(obj);
  obj={
 displayName:'Markov',
phoneNumbers:[{value:'xxxxxx'},{value:'yyyyyy'}]
 };
 contacts.push(obj);
 function contactfindSuccess() {
    for (var i = 0; i < contacts.length; i++) {
      for (var j = 0; j < contacts[i].phoneNumbers.length; j++) {

        var nummer = contacts[i].phoneNumbers[j].value;
        var jens = contacts[i].displayName;
        var para = document.createElement("a");

        var t = document.createTextNode(jens);
        para.appendChild(t);
        para.title = jens;
        para.href = "tel:" + nummer;
        document.getElementById("abc").appendChild(para);
      }


    }
  }
  
  function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  var td = document.getElementById("abc");
  var a = td.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
      if (a[i].innerHTML.substring(0, filter.length).toUpperCase()==filter) {
        a[i].style.display = "";
      } else {
        a[i].style.display = "none";
      }
      
    }
  }

#abc a{
float:left;
clear:left;
}

<input id="myInput" onkeyup="myFunction()" type="text"/>
<table id="myDIV">
  <tr class="header">
    <th>Naam</th>
  </tr>
  <tr>
    <td id="abc"></td>
  </tr>

</table>
<button onclick="contactfindSuccess()" style="margin-top:20px;">Find Contacts</button>

在 table 标签中创建元素 href

Create element href in a table tag

javascript

html

html-table

createelement