创建href = tel:无需添加号码即可工作

时间:2018-09-17 07:42:26

标签: javascript jquery html

我有一个可读取xml电话簿的javascript,可打印表格,我希望每个数字都可点击,以便启动电话应用。

<table class="table table-striped table-dark" id="campanie"></table>

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this);
        }
    };
    xmlhttp.open("GET", "campanie-full.xml", true);
    xmlhttp.send();
}

function myFunction(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="<thead class=thead-light><tr><th><h5 class=text-dark>Nr.</h5></th><th><h5 class=text-dark>Company</h5></th><th><h5 class=text-dark>Phone 1</h5></th><th><h5 class=text-dark>Phone 2</h5></th></tr></thead>";
    var x = xmlDoc.getElementsByTagName("DirectoryEntry");
    for (i = 0; i <x.length; i++) { 
        table += "<tr><td><p>" +
            [i+1] + "</p></td><td><p>" +
            x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue +
            "</p></td><td><a href=tel:>" +
            x[i].getElementsByTagName("Telephone")[0].childNodes[0].nodeValue +
            "</a></td><td><a href=tel:>" +
            x[i].getElementsByTagName("Telephone")[0].childNodes[0].nodeValue +
            "</a></td></tr>";
    }
    document.getElementById("campanie").innerHTML = table;
}    

要使每个href=tel:正常工作,我应该怎么做? 另外,您会看到我两次放置了“ 电话”标签,因为电话簿有多个电话号码。第二个问题,我想知道如何正确读取它,因为XML文件无法以任何方式进行编辑。 XML 中的<Telephone>标签不能更改为<Telephone1><Telephone2>。但是,这个问题可以等待。

编辑:我添加了一个示例 XML

<CiscoIPPhoneDirectory>
<DirectoryEntry>
    <Name>Doctor Dolittle</Name>
    <Telephone>100</Telephone>
    <Telephone>+19001234567</Telephone>
</DirectoryEntry>
<DirectoryEntry>
    <Name>Tommy Stubbins</Name>
    <Telephone>101</Telephone>
</DirectoryEntry>
<DirectoryEntry>
    <Name>Chee-Chee</Name>
    <Telephone>102</Telephone>
</DirectoryEntry>
<DirectoryEntry>
    <Name>Prince Bumpo</Name>
    <Telephone>103</Telephone>
</DirectoryEntry>
<DirectoryEntry>
    <Name>Polynesia</Name>
    <Telephone>104</Telephone>
</DirectoryEntry>
<DirectoryEntry>
    <Name>Gub-Gub</Name>
    <Telephone>105</Telephone>
</DirectoryEntry>
<DirectoryEntry>
    <Name>Jip</Name>
    <Telephone>106</Telephone>
</DirectoryEntry>
<DirectoryEntry>
    <Name>Dab-Dab</Name>
    <Telephone>107</Telephone>
</DirectoryEntry>

1 个答案:

答案 0 :(得分:0)

您需要检查Xml以查看是否有1或2个电话号码。 (如果发生这种情况,您也可以使其不进行任何检查,而根本不添加任何行)。然后,根据数据说明添加第二个电话号码或一个空单元格。

更改从Xml响应创建表内容的函数,就像这样...

function myFunction(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="<thead class=thead-light>" +
        "<tr><th><h5 class=text-dark>Nr.</h5></th>" +
        "<th><h5 class=text-dark>Company</h5></th>" +
        "<th><h5 class=text-dark>Phone 1</h5></th>" +
        "<th><h5 class=text-dark>Phone 2</h5></th>" +
        "</tr></thead>";

    var x = xmlDoc.getElementsByTagName("DirectoryEntry");

    for (i = 0; i <x.length; i++) { 
        var name = x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
        var tel1 = x[i].getElementsByTagName("Telephone")[0].childNodes[0].nodeValue;
        var tel2 = "";

        // if there are 2 phone numbers, get the value of the 2nd one
        if (x[i].getElementsByTagName("Telephone").length === 2) {
            // check that it's not an empty node...
            if (x[i].getElementsByTagName("Telephone")[1].childNodes) {
                tel2 = x[i].getElementsByTagName("Telephone")[1].childNodes[0].nodeValue;
            }
        }

        table += "<tr><td><p>" + [i+1] + "</p></td>" +
            "<td><p>" + name + "</p></td>" +
            "<td><a href='tel:" + tel1 + "'>" + tel1 + "</a></td>";

        // if we don't have a 2nd phone number then add an empty cell
        if (tel2 === "") {
            table += "<td></td>";
        }
        // if we do have a 2nd phone number then add it
        else {
            table += "<td><a href='tel:" + tel2 + "'>" + tel2 + "</a></td>";
        }

        table += "</tr>";
    }
    document.getElementById("campanie").innerHTML = table;
}