如何使用javascript / jquery（记分板）编辑html表 [英] How to edit html table using javascript/jquery (scoreboard)

问题描述

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
            },
        ]
    }
}

这是我在html中的表格

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>

这是我的js，我加载json数据并创建表

< br / >

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

推荐答案

这篇关于如何使用javascript / jquery（记分板）编辑html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！