Click here to Skip to main content
14,739,359 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
right now I'm doing a table using json, the table contains 12 soccer teams, I want to be able to select two teams from the table (two rows) and display a dialog in which I can type the goals each team scored, after that I want to update the table depending on the score. I thought it would be possible using jquery dialog with a text input but I don't know how I can update the data in the table. I'm a beginner in web dev and specially in jQuery so if you guys have a link with helpful info please share

The json has this structure:

<pre>{
    "results":
    {
        "teams":[
            {
                "team": "Heredia",
                "PJ":12,
                "PG":8,
                "PE":2,
                "PP":2,
                "GF":25,
                "GC":10,
                "DG":15,
                "Pt":25
            },
        ]
    }
}

This is my table in the html
<table>
    <thead id="datah">
        <td id="position">#</td>
        <td>/\</td>
        <td colspan="5">Team</td>
        <td>PJ</td>
        <td>PG</td>
        <td>PE</td>
        <td>PP</td>
        <td>GF</td>
        <td>GC</td>
        <td>DG</td>
        <td>Pt</td>
    </thead><br/>
    <tbody></tbody>
</table>


And this is my js where I load the json data and create the table

var JSON_DATA_URL="json/teams.json";
var getReport= function(e){
    var doc = document;

    var table= doc.getElementById("data");

    table.style.visibility="visible";

    var tb = table.tBodies[0];
    for(;tb.childElementCount;)
    tb.removeChild(tb.children[0]);

    var data = loadJSONData(JSON_DATA_URL, function(e){
        return {
            results:{
                title:"Error Data Not Available"
            },
            teams:[]
        };
    });

    var teams = data.results.teams;

    if(!table.caption){
        var cap = doc.createElement("caption");
        cap.innerHTML=data.results.title;
        table.appendChild(cap);
    }

    var i=0;
    var j=1;
    for(i in teams){
        var teamObj = teams[i];

        var tr = tb.insertRow(i);
        tr.setAttribute("class","row");
        tr.setAttribute("onclick","clickTeam(this)");


        var num = tr.insertCell(0);
        var arrow = tr.insertCell(1);
        var team = tr.insertCell(2);
        var PJ = tr.insertCell(3);
        var PG = tr.insertCell(4);
        var PE = tr.insertCell(5);
        var PP = tr.insertCell(6);
        var GF = tr.insertCell(7);
        var GC = tr.insertCell(8);
        var DG = tr.insertCell(9);
        var Pt = tr.insertCell(10);

        num.innerHTML = j;
        num.setAttribute("id","num");
        Pt.setAttribute("class","pts");
        if(j<=4) num.setAttribute("class","blue");
        else num.setAttribute("class","black");

        arrow.innerHTML = "null";
        team.innerHTML=teamObj.team;
        team.setAttribute("colspan",5);
        PJ.innerHTML=teamObj.PJ;
        PG.innerHTML=teamObj.PG;
        PE.innerHTML=teamObj.PE;
        PP.innerHTML=teamObj.PP;
        GF.innerHTML=teamObj.GF;
        GC.innerHTML=teamObj.GC;
        DG.innerHTML=teamObj.DG;
        Pt.innerHTML=teamObj.Pt;

        j++;
    }
}
Posted
Comments
bmw318mt 18-Mar-14 16:24pm
   
are you going to store the scores permanently somewhere?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900