Question

我的HTML代码是这样的：

...
    <button class="save bookbtn mt1">More</button>
...

    <div class="cruisedropd">
        <div id="loading" class="loading"></div>
    </div>
...

我的Javascript代码就像这样

...
$('.save').click(function () {
    ...
    success: function (response) {
        ...
        var elem = $parent.find('.loading').empty();  
                    elem.append('<table class="table">\
                    <tbody>\
                        <tr>\
                            <th>Status</th>\
                            <th>Room Grade</th>\
                            <th>Meal</th>\
                            <th>Per Room.Night</th>\
                            <th>Cancel Policy</th>\
                            <th>Book It</th>\
                        </tr>')
                    for(var i=0; i<response.SearchAvailResponse.Hotel.length; i++){  //make sure to use var

                        elem.append('<tr>\
                            <td>' + Status + '</td>\
                            <td>' + RmGrade + '</td>\
                            <td>' + Meal + '</td>\
                            <td>' + Currency + ' ' + TotalRate + '</td>\
                            <td><a href="#">Cancel Policy</a></td>\
                            <td>\
                                <form action="details.html">\
                                    <button class="bookbtn mt1" type="submit">Book</button>\
                                </form>\
                            </td>\
                        </tr>');  //add the new content
                    }
                    elem.append('</tbody>\
                </table>')
        ...
    }
    ...
}
...

视图是这样的：http://imgur.com/1OIVGGU

为什么我的CSS显示不规则？

解决我问题的任何解决方案？

非常感谢

Answer 1

简短的回答是你不能以这种方式建立一个表。

您的第一段代码会附加表格标题。然后DOM自动添加结束表标记。

您的下一段代码会运行一个循环来追加行。但是，该表已在上一步中创建。

所以你最终在DOM中有两个不对齐的表。

建议将表构建为字符串，然后将该字符串附加到div，以便DOM构建单个表。

<强>更新

此代码响应OP注释，演示了如何使原始代码仅使用3个非常小的更改。该表首先构建为字符串。然后将该字符串附加到容器的innerHTML。这样做可以防止DOM过早地向表元素添加结束标记，就像原始代码中的情况一样。

现在表头和行对齐，这就是陈述的问题。

点击“运行代码段”按钮，看它是否有效。

function success() {

		
                    var html =('<table class="table">\
                    <tbody>\
                        <tr>\
                            <th>Status</th>\
                            <th>Room Grade</th>\
                            <th>Meal</th>\
                            <th>Per Room.Night</th>\
                            <th>Cancel Policy</th>\
                            <th>Book It</th>\
                        </tr>')
                    for(var i=0; i<10; i++){  

                        html += ('<tr>\
                            <td>' + Status + '</td>\
                            <td>' + RmGrade + '</td>\
                            <td>' + Meal + '</td>\
                            <td>' + Currency + ' ' + TotalRate + '</td>\
                            <td><a href="#">Cancel Policy</a></td>\
                            <td>\
                                <form action="details.html">\
                                    <button class="bookbtn mt1" type="submit">Book</button>\
                                </form>\
                            </td>\
                        </tr>');  
                    }
                    
                    html += ('</tbody>\
                </table>');
				
				$('#container').html( html );
}
		

// test data
var Status="OK", RmGrade=5, Meal="Yes", Currency="Euro", TotalRate="100";

success();

td,th {padding:2px; border:1px gray solid;}
th {background-color: peru; }
table {border-collapse: collapse;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="container"></div>

Answer 2

您的意思是表格内容未正确对齐吗？验证您的CSS在TD元素上没有宽度属性。

HTML：

<table>
  <tr>
    <th>Test1</th>
    <th>Test2</th>
    <th>Test3</th>
  </tr>
    <tr>
      <td>Wat</td>
      <td>Wat2</td>
      <td>Wat3</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Foo2</td>
      <td>Foo3</td>
    </tr>
</table>

CSS：

table {
  width: 100%;
}
th, td {
  text-align: left;
}

小提琴：https://jsfiddle.net/vup7vz1k/1/

为什么我的CSS显示不规则？

2 个答案: