有没有办法使用 xml 中的“颜色”标签来更改单独的 <td> 行字体颜色
Posted
技术标签:
【中文标题】有没有办法使用 xml 中的“颜色”标签来更改单独的 <td> 行字体颜色【英文标题】：Is there any way to change the separate <td> lines font color using the 'color' tag from the xml 【发布时间】：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 文件 【参考方案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类。以上是关于有没有办法使用 xml 中的“颜色”标签来更改单独的 <td> 行字体颜色的主要内容，如果未能解决你的问题，请参考以下文章