Question

我有ID="ranking"的div，我想在这里放一些JavaScript数组的信息，每个行都有两列：一个用于dados[i][25]，另一个用于dados[i][26] function dadosRanking(dados){ document.getElementById("ranking").innerHTML += '<table class="table"><tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr><tr><td>PONTOS</td><td>UTILIZADOR</td></tr>' for(var i=1;i<6;i++) { document.getElementById("ranking").innerHTML += '<tr><td>' + dados[i][25] + '</td><td>' + dados[i][26] + '</td></tr>'; } document.getElementById("ranking").innerHTML += '</table>'; }。

我的代码是：

<table class="table">
  <tr>
    <td valign="middle" class="question" colspan=2>
      <h1>RANKING (+ PONTOS)</h1>
    </td>
  </tr>
  <tr>
    <td>PONTOS</td>
    <td>UTILIZADOR</td>
  </tr>
  <tr>
    <td>
      100
    </td>
    <td>
      Username
    </td>
  </tr>
</table>

我期望的代码就是：

<table class="table">
  <tr>
    <td valign="middle" class="question" colspan=2>
      <h1>RANKING (+ PONTOS)</h1>
    </td>
  </tr>
  <tr>
    <td>PONTOS</td>
    <td>UTILIZADOR</td>
  </tr>
</table>
"100Username"

但是，HTML代码脚本编写如下：

#include <iostream>
using namespace std;   // for the sake of simplicity. (otherwise, std::)

// Function overloading and the use of templates

// overloading the function larger
int larger(int, int);
char larger(char, char);
double larger(double, double);
string larger(string, string);

template <class elementType>
elementType anyLarger(elementType parameter1, elementType parameter2);


int main() {

    cout << endl;
    cout << "Function Overloading" << endl;

    cout << "larger(15, 27)            =  " << larger(15, 27) << endl;
    cout << "larger('X', 'P')          =  " << larger('X', 'P') << endl;
    cout << "larger(4.9, 3.2)          =  " << larger(4.9, 3.2) << endl;
    cout << "larger(cat, dog)          =  " << larger("cat", "dog") << endl;

    cout << endl;
    cout << "Using the function template to find the larger of two items" << endl;
    cout << "anyLarger(15, 27)         =  " << anyLarger(15, 27) << endl;
    cout << "anyLarger('X', 'P')       =  " << anyLarger('X', 'P') << endl;
    cout << "anyLarger(4.9, 3.2)       =  " << anyLarger(4.9, 3.2) << endl;
    cout << "anyLarger(cat, dog)       =  " << anyLarger("cat", "dog") << endl;
    cout << endl;


    cout << "Compare two strings:   cat, dog" << endl;
    if ("cat" >= "dog") {
      cout << "cat is greater than dog" << endl;
    }
    else {
      cout << "dog is greater than cat" << endl;
    }

    cout << endl;
    string strCat = "cat";
    string strDog = "dog";
    cout << "string strCat = cat" << endl;
    cout << "string strDog = dog" << endl;
    if (strCat >= strDog) {
      cout << "strCat is greater than strDog" << endl;
    }
    else {
      cout << "strDog is greater than strCat" << endl;
    }
    cout << endl;
} // end main 

// Overloading larger
int larger(int x, int y) {
    if (x >= y)
      return x;
    else 
      return y;
}

char larger(char a, char b) {
    if (a >= b)
      return a;
    else 
      return b;
}

double larger(double p, double q) {
    if (p >= q)
      return p;
    else
      return q;
}

string larger(string y, string z) {
    if (y >= z)
      return y;
    else
      return z;
}


// Defining the template function
template <class elementType>
elementType anyLarger(elementType parameter1, elementType parameter2)
{
    if (parameter1 >= parameter2)
      return parameter1; 
    else
      return parameter2;
}

Answer 1

每次更新innerHTML时，浏览器都会解析并呈现它，为此，它还会尝试“修复”您的HTML。这可能会产生意想不到的后果。不要使用部分表定义推送到innerHTML，而是在单独的值中收集HTML并推送到innerHTML一次。

function dadosRanking(dados){
    var s = "";
    s += '<table class="table"><tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr><tr><td>PONTOS</td><td>UTILIZADOR</td></tr>'
    for(var i=1;i<6;i++) {
        s += '<tr><td>' + dados[i][25] + '</td><td>' + dados[i][26] + '</td></tr>';
    }
    s += '</table>';
    document.getElementById("ranking").innerHTML += s;
}

在

document.getElementById("ranking").innerHTML += '<table class="table"><tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr><tr><td>PONTOS</td><td>UTILIZADOR</td></tr>'

innerHTML成为：

<table class="table">
  <tr><td valign="middle" class="question" colspan=2><h1>RANKING (+ PONTOS)</h1></td></tr>
  <tr><td>PONTOS</td><td>UTILIZADOR</td></tr>
</table>

请注意，该表已关闭！

在

document.getElementById("ranking").innerHTML += '<tr><td>foo</td><td>bar</td></tr>';

innerHTML成为

<table>..</table>
foobar

<tr>和<td>在表格上下文之外无效，因此会将其删除。

在

document.getElementById("ranking").innerHTML += '</table>';

innerHTML不会改变，因为</table>没有做任何事情，没有要关闭的表。

对于带数组的循环不起作用

1 个答案: