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++;
}
}