tr: nth-child css zebra striping после xml jquery parsing

Как применить стиль к таблице после разбора XML-данных в таблицу? В приведенном ниже коде I Созданы первые три строки таблицы с использованием html, затем дополнительные строки были созданы путем синтаксического анализа XML. однако стиль Zebra stripe не был применен к таблице после вызова jquery. Я изо всех сил старался найти проблему с моим кодом, но я в тупике.tr: nth-child css zebra striping после xml jquery parsing

Вот пример кода моего HTML:

<head> 
    <title>Football Players</title> 
    <style> 
     table{ 
      border-collapse: collapse; 
      border: solid 1px #dddddd; 
      width: 500px; 
     } 
     th{ 
      text-align: left; 
     } 
    </style> 

    </head> 

<body> 
    <table> 
    <tbody> 
     <tr> 
     <th>Name</th> 
     <th>Club</th> 
     <th>Number</th> 
     <th>Country</th> 
     </tr> 
     <tr> 
     <td>Lionel Messi</td> 
     <td>Barcelona</td> 
     <td>10</td> 
     <td>Argentina</td> 
     </tr> 
     <tr> 
     <td>Juan Mata</td> 
     <td>Manchester United</td> 
     <td>8</td> 
     <td>Spain</td> 
     </tr> 
    </tbody> 
    </table> 
</body>

И следующий отрывок из моего JQuery:

$(document).ready(function() { 
    $.ajax({ 
    type: "GET", 
    url: "football_player.xml", 
    dataType: "xml", 
    success: processXML 

    }); 

    function processXML(xml) { 
    $(xml).find("football_player").each(function() { 
     $("table tbody").append("<tr class = 'myClass'>"); 
     $("table tbody").append("<td>" + $(this).find("name").text() + "</td>"); 
     $("table tbody").append("<td>" + $(this).find("club").text() + "</td>"); 
     $("table tbody").append("<td>" + $(this).find("number").text() + "</td>"); 
     $("table tbody").append("<td>" + $(this).find("country").text() + "</td>"); 
     $("table tbody").append("</tr>");   
    });//close processXML 


    $("table tbody tr:nth-child(odd)").css("background-color", "#dddddd"); 
    }  
});//close document.ready()

И, наконец, файл XML:

<football_players> 
    <football_player> 
    <name>Cristiano Ronaldo</name> 
    <club>Real Madrid</club> 
    <number>7</number> 
    <country>Portugal </country> 
    </football_player> 

    <football_player> 
    <name>Fernando Torres </name> 
    <club>Chelsea </club> 
    <number>9</number> 
    <country>Spain</country> 
    </football_player> 

    <football_player> 
    <name>Iker Casillas</name> 
    <club>Real Madrid </club> 
    <number>1</number> 
    <country>Spain</country> 
    </football_player>  

    <football_player> 
    <name>David Beckham</name> 
    <club>Los Angeles Galaxy</club> 
    <number>23</number> 
    <country>England</country> 
    </football_player> 
</football_players>

источник

2015-06-27 Masimba Rodgers

Поверки консоль всегда хорошая идея. Проблема в вашем коде, вероятно, находится в функции processXML(xml). Это beacaus e ваши <tr> были закрыты перед добавлением <td>. Он не применял цвет.

Изменить это ..

 function processXML(xml) { 
     $(xml).find("football_player").each(function() { 
      $("table tbody").append("<tr class = 'myClass'>"+"<td>" + 
$(this).find("name").text() + "</td>"+"<td>" + $(this).find("club").text() + "</td>"+"<td>" + $(this).find("number").text() + "</td>"+"<td>" + $(this).find("country").text() + "</td>"+"</tr>");   
     });//close processXML 


$("table tbody tr:nth-child(odd)").css("background-color", "#dddddd"); 
    }

источник

2015-06-27 15:32:32 Varun

Спасибо Varun! Копирование и вставка кода не работала, но я редактировал свой код с помощью вашего руководства, и это сработало! вот он: –

PS Это мой первый вопрос о переполнении стека, и я с нетерпением жду таких замечательных событий! –

Благодаря Varun я придумал, после чего работал:

function processXML(xml) { 
    $(xml).find("football_player").each(function() { 
     $("table tbody").append("<tr class = 'myClass'><td>" + $(this).find("name").text() + "</td><td>" + $(this).find("club").text() + "</td><td>" + $(this).find("number").text() + "</td><td>" + $(this).find("country").text() + "</td></tr>");   
    }); 


    $("table tbody tr:nth-child(odd)").css("background-color", "#dddddd"); 
    }

источник

2015-06-27 16:07:54

tr: nth-child css zebra striping после xml jquery parsing

ответ

Смежные вопросы