CODEWITHSUNDEEP
javascripthtmlhtml-tablecreateelement
belmen
belmen

Reputation: 35

Create element href in a table tag

I'm making a app in Javascript and html. When you click on the button "find contact" , Then you see all the contacts from you're phone in the app. Then when you click on a name you can call that person.

This last thing have I done with a href, but I want my contacts below each other. Now they stands next to each other. Also this must into a table.

This is my code so far :

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 search function : 

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

Upvotes: 0

Views: 450

Answers (1)

lhavCoder
lhavCoder

Reputation: 961

EDIT --> Note that the search function will work only after the find contacts button is pressed. I'm assuming thats what you want. Cheers

Hi i'm assuming that you want to put all the contacts into one td. All you have to do is style the a tags to appear one below the other. check out the code below. If this is not what you had in mind let me know.

Also, I've taken a sample json object to display the data where there are people person1 and person2 with 2 and 3 phone numbers each. 

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>

Upvotes: 1

Related Questions