使用java函数将html图标放入表中答案

【问题标题】：Putting html icon into table using java function使用java函数将html图标放入表中
【发布时间】：2020-09-23 07:06:35
【问题描述】：

我正在尝试从 FontAwesome html 图标代码制作图标，以将值传输到 java 代码以显示在表格中，但是正在发送文本和图标，但图标在表格中未正确显示，所以我该如何制作图标显示正常。我试过使用 appendChild() 但我无法让它工作....

var row=2;


function show()
{
    
    var datee= document.getElementById("dte").value;
    var dayy = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    var d = new Date(datee);
    var dayName = dayy[d.getDay()];
    var table = document.getElementById("tablee");
    var cel=document.getElementById("celsius").value;
    var weth=document.getElementById("icon").value;
    
    var far=(cel*9/5)+32;
    
    
    
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; 
    var curr_year = d.getFullYear();
    var DATE = (curr_date + "/" + curr_month + "/" + curr_year);
    
    var add = table.insertRow(row);
    var add1= add.insertCell(0);
    var add2= add.insertCell(1);
    var add3= add.insertCell(2);
    var add4= add.insertCell(3);
    var add5= add.insertCell(4);
    
    
    
    add1.innerHTML =DATE;
    add2.innerHTML =dayName;
    add3.innerHTML = cel;
    add4.innerHTML = far;
    add5.innerHTML = weth;
    
    
    row++;
    
}

<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="PairQ2.css">
    <script src = "PairQ2.js"></script>
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    
    
    
    
</head>

<body>
    <label>Please select a date and enter temperature in celsius</label></br></br>
    <label for="dte">Date:</label>
    <input type="date" id="dte" name="dte"></br></br>
    <label for="celsius">Celsius:</label>
    <input type="number" id="celsius" name = "celsius"></br></br>
    <label>Select suitable weather :</label>
    
    <select class="fa" id="icon" >
        <option class="fa"> &#xf0c2 Cloudy</option>
        <option class="fa"> &#xf185 Sunny</option>
        <option class="fa"> &#xf72e Windy </option>
        <option class="fa"> &#xf73d Drizzle </option>
        <option class="fa"> &#xf740 Heavy Rain </option>
        <option class="fa"> &#xf0e7 Thunderstorm</option>
    </select>
    
    
    <table id = "tablee"> 
     <tr> 
     <th rowspan = "2">Date</th> 
     <th rowspan = "2">Day</th>
     <th colspan = "2">Temperature</th> 
     <th rowspan = "2">Weather</th> 
     </tr>
     <tr>
     <th>Celsius</th>
     <th>Fahrenheit</th>
     </tr>
     </table></br></br>
     <input type= "button" value="Submit" onclick="show()">
     
     
    

</body>

    
    
    
    
        
    


</html>

【问题讨论】：

标签： javascript html icons

【解决方案1】：

icon 在与该元素关联的class 的帮助下呈现。因为您只获取选项的值，因此HTML 无法识别icon。

为 add5 对象赋值后使用add5.classList.add('fa'); 正确渲染它，以便正确渲染图标。

var row = 2;


function show() {
  debugger;
  var datee = document.getElementById("dte").value;
  var dayy = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  var d = new Date(datee);
  var dayName = dayy[d.getDay()];
  var table = document.getElementById("tablee");
  var cel = document.getElementById("celsius").value;
  var weth = document.getElementById("icon").value;

  var far = (cel * 9 / 5) + 32;



  var curr_date = d.getDate();
  var curr_month = d.getMonth() + 1;
  var curr_year = d.getFullYear();
  var DATE = (curr_date + "/" + curr_month + "/" + curr_year);

  var add = table.insertRow(row);
  var add1 = add.insertCell(0);
  var add2 = add.insertCell(1);
  var add3 = add.insertCell(2);
  var add4 = add.insertCell(3);
  var add5 = add.insertCell(4);



  add1.innerHTML = DATE;
  add2.innerHTML = dayName;
  add3.innerHTML = cel;
  add4.innerHTML = far;
  add5.innerHTML = weth;
  add5.classList.add('fa');


  row++;

}

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" href="PairQ2.css">
  <script src="PairQ2.js"></script>
  <script src='https://kit.fontawesome.com/a076d05399.js'></script>




</head>

<body>
  <label>Please select a date and enter temperature in celsius</label></br>
  </br>
  <label for="dte">Date:</label>
  <input type="date" id="dte" name="dte"></br>
  </br>
  <label for="celsius">Celsius:</label>
  <input type="number" id="celsius" name="celsius"></br>
  </br>
  <label>Select suitable weather :</label>

  <select class="fa" id="icon">
    <option class="fa"> &#xf0c2 Cloudy</option>
    <option class="fa"> &#xf185 Sunny</option>
    <option class="fa"> &#xf72e Windy </option>
    <option class="fa"> &#xf73d Drizzle </option>
    <option class="fa"> &#xf740 Heavy Rain </option>
    <option class="fa"> &#xf0e7 Thunderstorm</option>
  </select>


  <table id="tablee">
    <tr>
      <th rowspan="2">Date</th>
      <th rowspan="2">Day</th>
      <th colspan="2">Temperature</th>
      <th rowspan="2">Weather</th>
    </tr>
    <tr>
      <th>Celsius</th>
      <th>Fahrenheit</th>
    </tr>
  </table>
  </br>
  </br>
  <input type="button" value="Submit" onclick="show()">




</body>

【讨论】：

很高兴它对您有所帮助。欢迎来到 StackOverflow :)