从数组创建HTML表(使用提示)

时间:2018-06-24 10:22:25

标签: javascript html

我是Html的新手。这是我的第一个html javascript程序,我对此有疑问。

用户将他/她的gpa CS102 A 3和Math101 B 3放入。然后,我将数据放入Array。问题是当我创建表时。我想创建一个像这样的表

public class TabsPagerAdapter extends FragmentPagerAdapter {

private List<TabItemAdapterModel> models = new ArrayList<>();

private Context mContext;

public TabsPagerAdapter(android.support.v4.app.FragmentManager manager, Context context) {

    super(manager);

    this.mContext = context;
}

@Override
public Fragment getItem(int position) {

    return models.get(position).getFragmentToShow();
}

@Override
public int getCount() {

    return models.size();
}

public void addTabs(ArrayList<TabItemAdapterModel> tabItemAdapterModels){

    if (UserDefaultUtil.deviceLanguageIsArabic()){

        Collections.reverse(tabItemAdapterModels);
    }

    models.addAll(tabItemAdapterModels);
}

我应该使用哪种循环?我尝试使用THL100 B+ 3 PHL107 A 3 ENG120 C+ 3 MTH245 A 4 CSC221 A 3 循环,但无法正常工作。

这是我的代码:

for
function load(){
    var data = [];
    while(true) {
        line = prompt("Enter course name, grade, and credit hours or click OK with no data to terminate");
        if(line == null || line == "") {
            break;
        }
        var values = line.split(/\s/);
        var citem = values[0];
        data.push(citem);

        var gpa = parseFloat(values[1]);
        var cgpa = [gpa];
        data.push(cgpa);
        var unit = values[2];
        var cunit = [unit];
        data.push(cunit);
    }
    return data;
}

function display(data) {
    var table=document.getElementById('result');
    table.innerHTML= "<tr><th> COURSE </th><th> GRADE </th><th> HOURS </th></tr>";

    for(var i in data){
        table.innerHTML +="<tr><td>" + data[i] + "</td><td>" + data[i]+1 + "</td><td>" + data[i]+2 + "</td></tr>";
    }
}
data = load();
display(data);

2 个答案:

答案 0 :(得分:1)

问题在于访问数据而不是循环,将每一行存储为数组中的一个元素,就像对象将很容易:

    function load(){
    var data = [];
    while(true) {
    line = prompt("Enter course name, grade, and credit hours or click OK with no data to terminate");
    if(line == null || line == "") {
    break;
    }
    var values = line.split(/\s/);
    var line = {
        COURSE: values[0],
        GRADE: parseFloat(values[1]),
        HOURS: values[2]
    };

    data.push(line); // now your array is [{COURSE: value, GRADE: value, HOURS: value}, {}, ...]

    }
    return data;
    }

    function display(data) {
    var table=document.getElementById('result');
    table.innerHTML= "<tr><th> COURSE </th><th> GRADE </th><th> HOURS </th> </tr>";

    for(var i in data){
    table.innerHTML +="<tr><td>" + data[i]["COURSE"] + "</td><td>" + data[i]["GRADE"] + "</td> <td>" + data[i]["HOURS"] + "</td></tr>";
    }
    }

更新:是的,可以在循环内访问数据,但可以访问任何变量

function display(data) {
        var table = document.getElementById('result');
        table.innerHTML = "<tr><th> COURSE </th><th> GRADE </th><th> HOURS </th> </tr>";
        let totalgp = 0; // if the total is for all courses define it here 
        for (var i in data) {
            let totalgp = 0; // if total grade for each course separately define it inside the loop
            if (data[i]["GRADE"] == "A") {
                var gp = 4 * data[i]["HOURS"];
                totalgp = totalgp + gp;
            }
            table.innerHTML += "<tr><td>" + data[i]["COURSE"] + "</td><td>" + data[i]["GRADE"] + "</td> <td>" + data[i]["HOURS"] + "</td></tr>";
        }
    }

答案 1 :(得分:0)

数据应存储在二维数组中,以方便访问元素。 for循环的用法是正确的。 要追加第一行- table.innerHTML +="<tr><td>" + data[0][0] + "</td><td>" + data[0][1] + "</td> <td>" + data[0][2] + "</td></tr>";

与第二行类似, table.innerHTML +="<tr><td>" + data[1][0] + "</td><td>" + data[1][1] + "</td> <td>" + data[1][2] + "</td></tr>";