Question

我只是在尝试这样做，但是我一直只得到countries[i].Code而不是图像，有人可以帮我吗？

function flist(){
  var list = document.querySelector("#flist");  
  var myRows = "";  

  for(var i=0; i < countries.length; i++){           
        myRows += "<tr>" +
                  "<td>" + "<figure>" + "<img src=" + "\"" + "/flags/"+ countries[i].Code  + 
                  ".png" + "\"" +  "alt=" + "\"" + countries[i].Code  + "\"" + "height=" +"\""+ "14"+ "\"" +  " width=" + "\"" +"14" + "\""+ ">" +"</figure>" + "</td>" +
                 "<td>" + countries[i].Code + "</td>" + 
                 "<td>" + countries[i].Name.English + "</td>" + 
                 "<td>" + countries[i].Continent + "</td>" + 
                 "<td>" + countries[i].AreaInKm2.toString()+ "</td>" +
                 "<td>" + countries[i].Population.toString() + "</td>" +
                 "<td>" + countries[i].Capital + "</td>" +
                 "</tr>";
  }

  list.innerHTML += myRows; 
};

国家示例

var国家= [ { 代号：“ AF”，大陆：“亚洲” AreaInKm2：652230，人口：35530081，首都：“喀布尔”，名称： { “英语”：“阿富汗”， “阿拉伯语”：“أفغانستان”， “ Chinese”：“阿富汗”， “ Franch”：“阿富汗”， “ Hindi”：“अफ़ग़ानिस्ाान”， “ Korean”：“아프가니스탄”， “日语”：“アフガニスタン”， “俄语”：“Афганистан” }

我正在尝试在每个县的HTML中创建一个表格，并请求带有一个标记

<h4 id="subtitle">List of Countries and Dependencies</h4>
<table id="outputTable">
  <thead>
      <tr>
        <th>Flag</th>
        <th>Code</th>
        <th id="countyrName">Country/Dep. Name</th>             
        <th>Continent</th>
        <th>Area (Km<sup>2</sup>)</th>
        <th>Population</th>
        <th>Capital</th>
      </tr>    
  </thead>

  <tbody id="flist"></tbody>

</table>

Answer 1

如果您使用单引号引起来使用javascript构建HTML，则不必在参数周围转义双引号，并且不太容易出错。

myRows += '<tr>' +
'<td><figure><img src="/flags/' + countries[i].Code + '.png" alt="' + countries[i].Code + '" height="14" width="14" /></figure></td>' +
'<td>' + countries[i].Code + '</td>' + 
'<td>' + countries[i].Name.English + '</td>' + 
'<td>' + countries[i].Continent + '</td>' + 
'<td>' + countries[i].AreaInKm2.toString()+ '</td>' +
'<td>' + countries[i].Population.toString() + '</td>' +
'<td>' + countries[i].Capital + '</td>' +
'</tr>';

Answer 2

我会将您的HTML保留为HTML，将其保留在JavaScript之外。如果您将class CharAttribute (models.Model): name = models.CharField(max_length=40) obj = models.ForeignKey(Obj, on_delete=models.CASCADE) class Meta: unique_together = ('name', 'obj') def clean(self): if IntAttribute.objects.filter(name=self.name, obj=self.obj).exists(): raise ValidationError('...')更改为table，则现在必须重写JavaScript。

设置一个隐藏的模板。制作要使用的模板的副本，然后一起删除模板。然后，您可以根据需要克隆模板的替换值，而无需担心HTML结构。

ul

var countries = [{
      Code: "AF",
      Continent: "Asia",
      AreaInKm2: 652230,
      Population: 35530081,
      Capital: "Kabul",
      Name: {
        "English": "Afghanistan",
        "Arabic": "أفغانستان",
        "Chinese": "阿富汗",
        "Franch": "Afghanistan",
        "Hindi": "अफ़ग़ानिस्तान",
        "Korean": "아프가니스탄",
        "Japanese": "アフガニスタン",
        "Russian": "Афганистан"
      }}]

    //Make a clone out of tempate 
    var template = document.getElementById("rowTemplate").cloneNode(true);
    template.removeAttribute("id")
    console.log(template);

    //get rid of original we done't  need it any more
    document.getElementById("flist").innerHTML = "";

    function flist() {
      var list = document.querySelector("#flist");
      var myRows = "";

      for (var i = 0; i < countries.length; i++) {
        //make a working copy of the template
        var workingTemplate = template.cloneNode(true);
        //Do the replace
        workingTemplate.innerHTML = workingTemplate.innerHTML
        .replace(/{{code}}/g, countries[i].Code)
        .replace(/{{name}}/g, countries[i].Name.English)
        .replace(/{{continent}}/g, countries[i].Continent)
        .replace(/{{area}}/g, countries[i].AreaInKm2)
        .replace(/{{population}}/g, countries[i].Population)
        .replace(/{{capital}}/g, countries[i].Capital);     
        
        myRows += workingTemplate.outerHTML;
      }

      //update the table
      list.innerHTML += myRows;
    };
    
    flist();

#rowTemplate {
  display: none;
}

通过JavaScript将图像添加到HTML表格单元格

2 个答案: