根据 xml 数据将 class 添加到 <tr>

Question

这是我的html

<table class="table table-condensed table-hover">
<thead>
    <tr>
        <th></th>
        <th colspan="4" align="center">Course 1</th>
        <th colspan="4" align="center">Course 2</th>
        <th colspan="2" align="center">Course 3</th>
    </tr>
</thead>
<thead>
    <tr>
        <th>Region</th>
        <th>User</th>
        <th>Time</th>
        <th>Test</th>
        <th>KO</th>
    </tr>
</thead>
<tbody id="data1">
</tbody>
</table>

这是我的 Jquery 来解析从 xml 到 HTML

的数据

$(document).ready(function() {
$.ajax({
    type: "GET",
    url: "data.xml", 
    dataType: "xml",
    success: function(xml) {
    alert('Connected to XML');      
        $(xml).find('test').each(function(){
            var Col1 = $(this).find('Region').text();
            var Col2 = $(this).find('User').text();
            var Col3 = $(this).find('Time').text();
            var Col4 = $(this).find('Test').text();
            var Col5 = $(this).find('KO').text();
            $('<tr></tr>').html('<td>'+Col1+'</td><td>'+Col2+'</td><td>'+Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td>').appendto('#data1');

我希望能够根据来自 xml（区域）的数据将 class 分配给一行。

if region=asia 添加 class "blue" 如果 region=europe 添加 class "pink"

这是我可以添加到上面的内容 Jquery 吗？请指教

这可能吗？提前感谢任何建议或方法。

Answer 1

已更新，以下代码是一种实现方式：

if (Col1 === 'asia')  $('<tr class="blue"></tr>').html('<td>'+Col1+'</td><td>'+Col2+'</td><td>'+Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td>').appendTo('#data1');

else if (Col1 === 'europe')  $('<tr class="pink"></tr>').html('<td>'+Col1+'</td><td>'+Col2+'</td><td>'+Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td>').appendTo('#data1');

Fiddle (note it hasn't been tested with XML data). Also you need to change your appendto function call to .appendTo()（大写 'T'）。

Answer 2

您可以根据收到的文字制作switch。

我们从您的代码中得知，您在此处引用了该区域：var Col1 = $(this).find('Region').text();

所以，尝试这样的事情：

var className = "";

switch(Col1){
    case: "asia" :
        className = "asia-class";
        break;
    case: "europe" :
        className = "europe-class";
        break;
}

稍后您可以像这样使用 className 变量：

$('<tr></tr>').addClass(className).html('<td>'+Col1+'</td><td>'+Col2+'</td><td>'+Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td>').appendto('#data1');

根据 xml 数据将 class 添加到 <tr>

add class to <tr> depending on xml data

jquery

html

xml

addclass