Есть ли какой-либо способ изменить цвет шрифта отдельных строк , используя тег 'color' из xml

ProgramBox

Есть ли какой-либо способ изменить цвет шрифта отдельных строк , используя тег ‘color’ из xml

Post author:admin
Запись опубликована:21 августа, 2022
Post category:Вопросы по программированию

#html #jquery #xml #html-table #fonts

#HTML #jquery #xml #html-таблица #шрифты

Вопрос:

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

Выше приведен базовый html, который я использую для отображения xml.

Я пытаюсь использовать этот приведенный ниже скрипт для динамического изменения цвета текста внутри элементов, используя значения ‘color’, которые у меня есть в 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>

1. Значение red взято откуда-то из XML-файла? Попробуйте добавить эту строку туда и посмотреть, что она вам скажет. console.log($(this));

2. Я добавил 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)

1. Что я хотел бы сделать, так это изменить цвет шрифта в зависимости от того, что такое тег xml color . Итак, если цена повышается, передняя часть становится зеленой, а если цена снижается, шрифт становится красным.

2. Вы можете добавить атрибут style в качестве моего отредактированного кода выше или добавить класс CSS на основе ваших условий.

Метки: Есть ли какой-либо способ изменить цвет линий вертикали, используя тег ‘color’ из xml