敲除foreach绑定创建额外的列

时间:2015-05-06 07:09:16

标签: html html5 knockout.js

有人可以告诉我为什么在下面的foreach绑定中有额外的td列?

<table border="1" style="margin-top: 5px">
<thead>
    <tr>
        <th>rid</th>
        <th>ciname</th>
        <th>dId</th>
        <th>ReqName</th>
        <th>ReqType</th>
        <th>bus</th>
        <th>Req test</th>
        <th>no trace</th>
        <th>p r</th>
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
    <tr>
        <td><span data-bind='text: reqid' /></td>
        <td><span data-bind='text: ciname' /></td>
        <td><span data-bind='text: did' /></td>
        <td><span data-bind='text: reqname' /><td>
        <td><span data-bind='text: reqtype' /><td>
        <td><span data-bind='text: bus' /><td>
        <td><span data-bind='text: reqtest' /><td>
        <td><span data-bind='text: notrace' /><td>
        <td><span data-bind='text: pr' /></td>
    </tr>
</tbody>
</table>

enter image description here

jsfiddle链接在这里: http://jsfiddle.net/g3j94273/

2 个答案:

答案 0 :(得分:2)

td未正确关闭

<table border="1" style="margin-top: 5px">
<thead>
    <tr>
        <th>rid</th>
        <th>ciname</th>
        <th>dId</th>
        <th>ReqName</th>
        <th>ReqType</th>
        <th>bus</th>
        <th>Req test</th>
        <th>no trace</th>
        <th>p r</th>
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
    <tr>
        <td><span data-bind='text: reqid' /></td>
        <td><span data-bind='text: ciname' /></td>
        <td><span data-bind='text: did' /></td>
        <td><span data-bind='text: reqname' /><td>
                                              ^^
        <td><span data-bind='text: reqtype' /><td>
                                              ^^
        <td><span data-bind='text: bus' /><td>
                                           ^^
        <td><span data-bind='text: reqtest' /><td>
                                              ^^
        <td><span data-bind='text: notrace' /><td>
                                              ^^
        <td><span data-bind='text: pr' /></td>
    </tr>
</tbody>
</table>

使用

http://jsfiddle.net/g3j94273/1/

答案 1 :(得分:2)

您的代码未正确关闭,您需要将部分<td>转换为</td>

<table border="1" style="margin-top: 5px">
    <thead>
        <tr>
            <th>rid</th>
            <th>ciname</th>
            <th>dId</th>
            <th>ReqName</th>
            <th>ReqType</th>
            <th>bus</th>
            <th>Req test</th>
            <th>no trace</th>
            <th>p r</th>
        </tr>
    </thead>
    <tbody data-bind='foreach: gifts'>
        <tr>
            <td><span data-bind='text: reqid' /></td>
            <td><span data-bind='text: ciname' /></td>
            <td><span data-bind='text: did' /></td>
            <td><span data-bind='text: reqname' /></td>
            <td><span data-bind='text: reqtype' /></td>
            <td><span data-bind='text: bus' /></td>
            <td><span data-bind='text: reqtest' /></td>
            <td><span data-bind='text: notrace' /></td>
            <td><span data-bind='text: pr' /></td>
        </tr>
    </tbody>
</table>