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

Question

我有一个可读取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>

Answer 1

您需要检查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;
}