2 votes

jms1980 avatar

variables en html utilisées pour référencer les fichiers javascript

Demandé el 30 de Août, 2016
Quand la question a-t-elle été
124 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai un html script :

<html lang="en" >
<head>
    <meta charset="utf-8">
    <!--<script type="text/javascript" src="included_name_table.js"></script> -->
    <script type="text/javascript" src="apps.js"></script>
    <script src="name_template.js"></script>  
    <center><h1>JavaScript Variables</h1></center>
    <script type="text/javascript" src="config.js"></script>  

    <center><p>In this example, x, y, and z are variables</p></center>
    <center><p id="demo"></p></center> 
    <script type="text/javascript" src="demo"></script>

<body onload="initialize('name');">
    <script type="text/javascript" src="check.js"></script>
    <p> <center> Check for Table </center> </p>
    <table height="100px" width="840px" align="center" cellspacing=0 cellpadding=0 border=2>        
        <tr><td colspan="3"><span id="name_table_body"></span></td></tr>
        <br>
    </table>
    <center> <button style="width:180px;margin-top:5px;margin-bottom:20px;" onClick="submitForm();">Submit Results</button> 
</body> 
</html>

Dans la ligne :

  <script type="text/javascript" src="included_name_table.js"></script>

J'essaie de définir le fichier included_name_table.js comme une variable qui est référencée dans un fichier de configuration config.js comme table_var comme indiqué ci-dessous :

var table_var = "included_name_table.js";

Le javascript inclus_name_table.js contient toutes les informations pour la table des noms.

La raison pour laquelle je fais cela est que si je modifie le fichier de configuration, je pourrai afficher une autre table au lieu de celle du fichier included_name_table.js. Comment puis-je faire pour que src soit égal à une variable définie dans config.js dans la ligne :

  <script type="text/javascript" src="included_name_table.js"></script>

?

Pour une référence supplémentaire, le fichier check.js contient les lignes suivantes :

var z = port_list_var;
document.getElementById("demo").innerHTML = z;

apps.js contient dans les lignes suivantes en ce qui concerne name_table_body :

    document.getElementById("name_table_body").innerHTML = replace_params(included_name_table_var, new Array ("Names"));

included_name_table_var est référencé dans le fichier included_name_table.js comme :

 var included_name_table_var="<table border=1 cellspacing=0 cellpadding=0 width=100%><tr>" +
          "<td width=20% valign='center' align='center' ><#$1$#> :</td>" +

etc.

Demandé el 30 de Août, 2016 par jms1980

Réponses

Trop de publicités?

1voto

Liquidchrome avatar
Liquidchrome Points 746

Vous pouvez utiliser des fichiers json séparés pour définir les données de la table et le chargement :

Dossier du tableau 1 :

{table1: {
        heading: "Table 1",
        body: "Body 1"
        }
}

Fichier du tableau 2 :

{table2: {
        heading: "Table 2",
        body: "Body 2"
        }
}

Dans mon exemple, j'ai simplement combiné toutes les données de la table dans une variable et vous pouvez choisir la table à charger par son ID. Quel que soit le lien de la table sur lequel vous cliquez, il chargera les données ID correspondantes à partir du json. var tables serait le fichier json auquel vous faites référence.

HTML :

<a href="#" id="table1">Load Table 1</a>
<a href="#" id="table2">Load Table 2</a>
<p/>
<div id="loadTable">
</div>

JAVASCRIPT (avec JQUERY) :

var tables={table1: {
                        heading: "Table 1",
            body: "Body 1"
                        },
            table2: {
            heading: "Table 2",
            body: "Body 2"
            }
}

$(function(){
    $("a").click(function(e){
    e.preventDefault();
  var i=this.id;
    var html="<table border=1><th>"+tables[i].heading+"</th><tr><td>"+tables[i].body+"</td></tr></table>";
    $("#loadTable").html(html);
    });
})

https://jsfiddle.net/byeqv8Ld/

Répondu el 30 de Août, 2016 par Liquidchrome (746 Points )

0voto

Michael Camden avatar
Michael Camden Points 172

Donc si je lis bien, vous avez un fichier javascript qui écrit dans une variable globale. table_var . La valeur de table_var est un fichier javascript que vous voulez charger sur la page. Dans ce cas, il vous suffit de créer dynamiquement l'élément script au chargement de la page. Le code suivant pourrait être placé dans votre fichier HTML, ou comme un fichier javascript séparé include.

(function () {
    // Create the script element
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // Assign the value of the source attribute to the globally defined table_var variable
    script.src = table_var;
    script.async = true;
    // Inject the script into the body (ideally this would go into the HEAD element, but the body works for our purposes
    document.body.appendChild(script);
})();
Répondu el 30 de Août, 2016 par Michael Camden (172 Points )

0voto

jms1980 avatar
jms1980 Points 348

J'ai résolu le problème avec le code suivant :

 <html lang="en" >
<head>
    <meta charset="utf-8">
    <!--<script type="text/javascript" src="included_name_table.js"></script> -->
    <script type="text/javascript" src="apps.js"></script>
    <script src="name_template.js"></script>  
    <scr
    <center><h1>JavaScript Variables</h1></center>
    <script type="text/javascript" src="vra_config.js"></script>  

    <center><p>In this example, x, y, and z are variables</p></center>
    <!--<center><p id="demo"></p></center> -->
    <!--<script type="text/javascript" src="demo"></script> -->

<body onload="initialize('name');">
    <script>
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = port_list_var;
        document.body.appendChild(script); 
    </script>   
    <p id="port_list_var"></p>
    <!--<script type="text/javascript" src="check.js"></script> -->
    <p> <center> Check for Table </center> </p>
    <table height="100px" width="840px" align="center" cellspacing=0 cellpadding=0 border=2>        
        <tr><td colspan="3"><span id="name_table_body"></span></td></tr>
        <br>
    </table>
    <center> <button style="width:180px;margin-top:5px;margin-bottom:20px;" onClick="submitForm();">Submit Results</button> 
</body> 
</html>
Répondu el 1 de Septembre, 2016 par jms1980 (348 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X