1

我想使用 jquery/ajax 将 xml 文档转换为 HTML 表。另外，我想在tr满足条件时添加一个类。这是我到目前为止所做的，但它没有按预期工作：1）HTML 表输出比它应该有的更多，2）tr ( ) 的条件类tr不起作用。任何帮助将不胜感激！td.no-kids

JQUERY/AJAX 代码：

$(document).ready(function(){
  $.ajax({
  type: "GET",
  url: "database.xml",
  dataType: "xml",
  success: function(xmlData) {
    $("person", xmlData).each(function(){
    var name = $(this).find("name").text(),
        kids = $(this).find("kids").text(),
            cars = $(this).find("cars").text();
    if(kids<1){
      $("tbody").append('<tr class="no-kids">');
    }else{
      $("tbody").append('<tr>');
    }             
    $("tbody tr").append('<td class="name">'+name+'</td>');
    $("tbody tr").append('<td class="kids">'+kids+'</td>');
    $("tbody tr").append('<td class="cars">'+cars+'</td>');
    $("tbody").append('</tr>');
    });
   }
  });
  $(".no-kids").css("color","red");
});

HTML 代码：

<table> 
    <thead>
        <tr> 
            <th>NAME</th>
            <th>KIDS</th>
            <th>CARS</th>
        </tr> 
    </thead> 
    <tbody>
    </tbody> 
</table>

DATABASE.XML 代码：

<root>
  <person>
    <name>Matt</name>
    <kids>3</kids>
    <cars>1</cars>
  </person>
  <person>
    <name>Jason</name>
    <kids>0</kids>
    <cars>2</cars>
  </person>
  <person>
    <name>Molly</name>
    <kids>1</kids>
    <cars>0</cars>
  </person>
</root>
4

1 回答 1

4

jQuery 只附加整个元素，而不是开始/结束标签。

var output = '<tr' + parseInt(kids) < 1 ? ' class="no-kids">' : '>';
output += '<td class="name">'+name+'</td>';
output += '<td class="kids">'+kids+'</td>';
output += '<td class="cars">'+cars+'</td>';
output += '</tr>';
$("tbody").append(output);

编辑：此外，您需要在成功回调中应用红色字体颜色。

   }
  });
  $(".no-kids").css("color","red");
});

应该

     $(".no-kids").css("color","red");
   }
  });
});
于 2012-09-28T20:55:57.650 回答