Question

点击任意一行时，我有一个包含值的表格，我必须显示result值passed or failed

这是我正在使用的代码从这段代码我怎样才能生成可扩展的行

function testHistory() {
    $.ajax({
        url: '/getJobs',
        cache: false
    }).done(function (report) {
        report = report.reverse();
        var testhistbl = '<br><table class="tablestyle" cellspacing="10" width="400px"><tr><th  class="thstyle" valign="center">User</th><th class="thstyle" valign="center" >Test Name</th><th  class="thstyle" valign="center">VM</th><th  class="thstyle" valign="center">Browsers</th><th  class="thstyle" valign="center">Result</th></tr>';
        report.forEach(function (result) {
            testpassfail(result.id, function (passfail) {
                testhistbl += '<tr><td class="rstyle">' + result.email + '</td><td class="rstyle">' + result.names + ' </td><td class="rstyle">' + result.os + '</td><td class="rstyle">' + result.browser + '</td><td class="rstyle">' + passfail + ' </td></tr>';
            });
        })
        testhistbl += '</table>';
        $('#testhistyTbl').html(testhistbl);
    });
}

我的hrml代码

<table class="tablestyle" width="400px" cellspacing="10">
    <tbody>
      <tr>
        <th class="thstyle" valign="center">User</th>
        <th class="thstyle" valign="center">Test Name</th>
        <th class="thstyle" valign="center">VM</th>
        <th class="thstyle" valign="center">Browsers</th>
        <th class="thstyle" valign="center">Result</th>
      </tr>
      <tr>
        <td class="rstyle">priya@gmial.com</td>
        <td class="rstyle">kkk</td>
        <td class="rstyle">VM-WIN7-64</td>
        <td class="rstyle">FF,GC</td>
        <td class="rstyle"><span class="pass"><b><font color="green">Passed<b></b></font></b></span><b><font color="green"><b> </b>
          </font>
          </b>
        </td>
      </tr>
      <tr>
        <td class="rstyle">Guest</td>
        <td class="rstyle">ttutu</td>
        <td class="rstyle">VM-WIN7-64</td>
        <td class="rstyle">FF,IE</td>
        <td class="rstyle"><span class="fail"><b><font color="red">Failed</font></b></span>
          <font
          color="red"></font>
        </td>
      </tr> 
    </tbody>
</table>

Answer 1

试试这段代码。而不是.html()使用append()方法，

$.ajax({
        url: '/getJobs',
        cache: false
    }).done(function (report) {
        report = report.reverse();
        report.forEach(function (result) {
         var trElement = $("<tr/>");
         trElement.append($('<td/>', { html: result.email }));
        trElement.append($('<td/>', { html: result.names }));
        trElement.append($('<td/>', { html: result.os }));
        trElement.append($('<td/>', { html: result.browser }));
        trElement.append($('<td/>', { html: passfail }));
        $("#testhistyTbl").append(trElement);  
            });
        })
    });

使用jquery展开表行

1 个答案: