crée un jquery qui modifie un tableau Json

besoin d'aide

Sujet résolu

16 janvier 2017 à 15:49:19

j'ai un tableau de multiplication en jquery mais je dois avec pourvoir lire des tableau fait en Json et le modifier un tableau comme suivant

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Tableau Javascript</title>
    </head>
     
    <body>
        <script type="text/javascript">
        function createElementWithDOM(tag, text)
{
    element = document.createElement(tag);
     
    if(typeof text != 'undefined')
    {
        elementText = document.createTextNode(text); // déprécié ? source ?
        element.appendChild(elementText);
    }
     
    return element;
}
 
var body = document.querySelector('body'); // à l'arrache
 
// Il y a d'autres lignes avant mais elles ne posent pas problème. (d'ou le 2 pour certaines variables)
 
var multiplicationTable2 = document.createElement('table');
multiplicationTable2.style.margin = '0 auto';
multiplicationTable2.style.textAlign = 'center';
 
var tableElements2 = []; // array
 
for(i=0; i<6; i++)
{
    tableElement2 = createElementWithDOM('tr');
    for(h=0; h<11; h++)
    {
        if (i==0 && h==0)
            tableElement2.appendChild(createElementWithDOM('td', ' × '));
        else
            tableElement2.appendChild(createElementWithDOM('td', i*h));
         
        if(i%2 == 0)
            tableElement2.style.backgroundColor = '#BBB';
        else
            tableElement2.style.backgroundColor = '#999';
         
        tableElement2.style.width = '40px';
        tableElement2.style.height = '40px';
    }
    tableElements2.push(tableElement2);
    multiplicationTable2.appendChild(tableElements2[i]);
}
 
body.appendChild(multiplicationTable2);
        </script>
    </body>
</html>

je pense qu'il faut tout reprendre mais c'est pour donnée un exemple en gros jai un tableau comme sa en jquery avec je peut lire un json et le modifier a ma guise depuis la page du jquey

modifier les chiffre les emplacement en rajouté ect ....

-
Edité par Az_ReHaaB 16 janvier 2017 à 16:15:29

Az_ReHaaB

18 janvier 2017 à 9:47:08

j'ai trouvée celui ci mais il y a un probleme de jquery il me dit que le jquery.min.js est introuvable

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <p><br/><br/></p>
    <div class="container">
      <table class="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
            <th>e</th>
            <th>f</th>
            <th>g</th>
            <th>h</th>
            <th>i</th>
            <th>j</th>
          </tr>
        </thead>
      </table>
    </div>
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script>
      $.getJSON("data.json",function(data){
        var items = [];
        $.each( data, function( key, val ){
          items.push("<tr>");
          items.push("<td id='" + key + "'>" + val.a + "</td>");
          items.push("<td id='" + key + "'>" + val.b + "</td>");
          items.push("<td id='" + key + "'>" + val.c + "</td>");
          items.push("<td id='" + key + "'>" + val.d + "</td>");
          items.push("<td id='" + key + "'>" + val.e + "</td>");
          items.push("<td id='" + key + "'>" + val.f + "</td>");
          items.push("<td id='" + key + "'>" + val.g + "</td>");
          items.push("<td id='" + key + "'>" + val.h + "</td>");
          items.push("<td id='" + key + "'>" + val.i + "</td>");
          items.push("<td id='" + key + "'>" + val.j + "</td>");
          items.push("</tr>");
        });
        $("<tbotdy/>" , {html: items.join("")}).appendTo("table");

      });
    </script>
  </body>
</html>