Question

我使用jQuery将JSON数据附加到表。我正在使用jExpand plugin来扩展我的行。我想在我的jQuery代码中添加class="arrow"和colspan="5"。我输入时会出错。如何将它们包含在jQuery代码中。

<td><div class="arrow"></div></td>
<td colspan="5">

将数据附加到表

的代码

 $("#tableid").append("<tr><td> Product </td> <td >" + Day[0].substring(5, 11) + "</td><td> Current </td><td> Weekly </td><td> Monthly </td></tr>");

    for (var i = 1; i <= result.length; i++) {
        $("#tableid").append("<tr><td>" + result[i].product + "</td><td><img src='images/" + result[i].Day01 + ".png' /></td><td><img src='images/" + result[i].Day07 + ".png' /></td><td><img src='images/" + result[i].WeeklyWeather + ".png' /></td><td><img src='images/" + result[i].MonthlyWeather + ".png' /></td><td><div class="arrow"></div></td></tr>");
    }

HTML代码

<html>
<head>
    <title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="js/dataBind.js"></script>
    <script type="text/javascript">  
        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();

            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script>        
</head>
<body>
    <h1>JankoAtWarpSpeed demos</h1>

<div class="CSSTableGenerator" >    
<table id="tableid">   
</table>
</div>
    <em>* Information taken from Wikipedia</em>
</body>
</html>

Answer 1

您的脚本应该是

$("#tableid").append("<tr><td> Product </td> <td >" + Day[0].substring(5, 11) + "</td><td> Current </td><td> Weekly </td><td> Monthly </td></tr>");

for (var i = 1; i <= result.length; i++) {
    //here your html breaks that fixed
    $("#tableid").append("<tr><td>" + result[i].product + "</td><td><img src='images/" + result[i].Day01 + ".png' /></td><td><img src='images/" + result[i].Day07 + ".png' /></td><td><img src='images/" + result[i].WeeklyWeather + ".png' /></td><td><img src='images/" + result[i].MonthlyWeather + ".png' /></td><td><div class='arrow'></div></td></tr>");
}

在jQuery中的Div标签

1 个答案: