Fatal编程技术网
  • html/
  • Html 有没有办法更改单独的<；td>；使用'；颜色'；xml中的标记

Html 有没有办法更改单独的<；td>；使用'；颜色'；xml中的标记

html jquery xml fonts

Html 有没有办法更改单独的<；td>；使用'；颜色'；xml中的标记,html,jquery,xml,html-table,fonts,Html,Jquery,Xml,Html Table,Fonts,我看不出有什么不对劲。让我们试着调试并找出问题所在。我还尝试了一个简单的例子，效果很好 <stock-data> <stock> <name>The a2 Milk Company</name> <code>(A2M)</code> <price>$7.11</price> <change>(+0.02)</ch

我看不出有什么不对劲。让我们试着调试并找出问题所在。我还尝试了一个简单的例子，效果很好

<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>
==>结果：

<!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>
值red是否来自xml文件中的某个地方？试着把这一行加进去，看看它能告诉你什么。log（$（this））；我添加了一个xml文件，用于从中获取颜色标记。我想做的是根据xml颜色标记的内容更改字体颜色。因此，如果价格上涨，前面是绿色，如果价格下跌，字体是红色。您可以添加样式属性作为上面我编辑的代码，或者根据您的条件添加CSS类。 
<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>

<!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)