有没有办法使用 xml 中的“颜色”标签来更改单独的 <td> 行字体颜色答案

【问题标题】：Is there any way to change the separate <td> lines font color using the 'color' tag from the xml有没有办法使用 xml 中的“颜色”标签来更改单独的 <td> 行字体颜色
【发布时间】：2021-03-09 01:21:02
【问题描述】：

<!DOCTYPE html>
<html>
    <head>
        <title>Read XML Data Using jQuery Ajax and Load it in HTML table</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    </head>
    <body>
        <p>Click button to Read XML and Show it in HTML</p>
        <input type="button" value="Read XML" id="btn" />
        <table class="table table-condensed table-hovered table-striped">
            <thead>
                <tr>
                    <th>Colour</th>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Price</th>
                    <th>Change</th>
                </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
    </body>
</html>

以上是我用来显示 xml 的基本 html。

我正在尝试使用下面的这个脚本，使用我在 xml 文件中的“颜色”值动态更改元素内文本的颜色。

<script>
    $(document).ready(function() {
        $('#btn').click(function () {
            $('#tableBody').empty();    
            $.ajax({
                type: 'GET',
                url: 'http://localhost:1313/domestic_equities.xml',           // The file path.
                dataType: 'xml',    
                success: function(xml) {
                    $(xml).find('stock').each(function() {
                        
                        colorChange = $(this).find('color').text();
                        console.log(colorChange);
    
                        $('#tableBody').append(
                            '<tr>' +
                                '<td>' + $(this).find('color').text() + '</td> ' +
                                '<td>' + $(this).find('name').text() + '</td> ' +
                                '<td>' + $(this).find('code').text() + '</td> ' +
                                '<td>' + $(this).find('price').text() + '</td> ' +
                                '<td>' + $(this).find('change').text() + '</td> ' +
                            '</tr>');
                    });
                }
            });
        });
    });
</script>

我创建了一个“colorChange”变量，但它似乎只显示红色。

任何帮助都会很棒！

这也是我从中获取所有信息的 xml 文件，包括颜色

<stock-data>
    <stock>
        <name>The a2 Milk Company</name>
        <code>(A2M)</code>
        <price>$7.11</price>
        <change>(+0.02)</change>
        <color>green</color>
    </stock>
    <stock>
        <name>Australian Agricult</name>
        <code>(AAC)</code>
        <price>$1.285</price>
        <change>(+0.005)</change>
        <color>green</color>
    </stock>
    <stock>
        <name>Ardent Leisure Group Ordinary/Units FP Stapled Securities</name>
        <code>(AAD)</code>
        <price>$1.76</price>
        <change>(+0.005)</change>
        <color>green</color>
    </stock>
    <stock>
        <name>Adelaide Brighton</name>
        <code>(ABC)</code>
        <price>$6.555</price>
        <change>(-0.055)</change>
        <color>red</color>
    </stock>
    <stock>
        <name>Abacus Property Group Units/ Stapled Securities</name>
        <code>(ABP)</code>
        <price>$4.165</price>
        <change>(-0.005)</change>
        <color>red</color>
    </stock>
    <stock>
        <name>Aconex Ltd</name>
        <code>(ACX)</code>
        <price>$5.21</price>
        <change>(-0.07)</change>
        <color>red</color>
    </stock>
    <stock>
        <name>AGL Energy Ltd</name>
        <code>(AGL)</code>
        <price>$25.32</price>
        <change>(-0.44)</change>
        <color>red</color>
    </stock>
    <stock>
        <name>Automotive Holdings</name>
        <code>(AHG)</code>
        <price>$3.72</price>
        <change>(-0.01)</change>
        <color>red</color>
    </stock>
    <stock>
        <name>Asaleo Care Ltd</name>
        <code>(AHY)</code>
        <price>$1.455</price>
        <change>(-0.135)</change>
        <color>red</color>
    </stock>
    <stock>
        <name>Aristocrat Leisure</name>
        <code>(ALL)</code>
        <price>$23.10</price>
        <change>(+0.27)</change>
        <color>green</color>
    </stock>
    <stock>
        <name>Als Ltd</name>
        <code>(ALQ)</code>
        <price>$6.85</price>
        <change>(-0.07)</change>
        <color>red</color>
    </stock>
</stock-data>

【问题讨论】：

值 red 是否来自 xml 文件中的某个位置？尝试在其中添加这一行，看看它告诉你什么。 console.log($(this));
我已经添加了用于从中获取颜色标签的 xml 文件

标签： html jquery xml html-table fonts

【解决方案1】：

我看不出有什么问题。让我们尝试调试并找出问题所在。我还尝试了一个简单的示例，它运行良好。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var xml = "<stock-data>" +
    "<stock>" +
    "    <name>The a2 Milk Company</name>" +
    "    <code>(A2M)</code>" +
    "    <price>$7.11</price>" +
    "    <change>(+0.02)</change>" +
    "   <color>green</color>" +
    "</stock>" +
    "<stock>" +
    "    <name>Adelaide Brighton</name>" +
    "    <code>(ABC)</code>" +
    "    <price>$6.555</price>" +
    "   <change>(-0.055)</change>" +
    "    <color>red</color>" +
    "</stock>" +
    "</stock-data>" +

  $("#btn1").click(function(){
    $(xml).find('stock').each(function() {
        var colorChange = $(this).find('color').text();
        console.log(colorChange);
        
        $('#tableBody').append(
        '<tr>' +
          '<td style="color:' + colorChange + '">' + colorChange +'</td>'+
          '<td>' + $(this).find('name').text() + '</td> ' +
          '<td>' + $(this).find('code').text() + '</td> ' +
          '<td>' + $(this).find('price').text() + '</td> ' +
          '<td>' + $(this).find('change').text() + '</td> ' +
          '</tr>'
        );
    });
  });
  
});
</script>
</head>
<body>

<table class="table table-condensed table-hovered table-striped">
  <thead>
    <tr>
      <th>Colour</th>
      <th>Name</th>
      <th>Code</th>
      <th>Price</th>
      <th>Change</th>
    </tr>
  </thead>
  <tbody id="tableBody">
  </tbody>
  </table>

<button id="btn1">Append data</button>

</body>
</html>

==> 结果：

Colour  Name                Code    Price   Change
green   The a2 Milk Company (A2M)   $7.11   (+0.02)
red     Adelaide Brighton   (ABC)   $6.555  (-0.055)

【讨论】：

我想做的是根据 xml 颜色标签的内容更改字体颜色。因此，如果价格上涨，前面是绿色，如果价格下跌，字体是红色。
您可以添加样式属性作为我上面编辑的代码或根据您的条件添加CSS类。