0

My HTML Code is like this :

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

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

My Javascript Code is like this

...
$('.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>')
        ...
    }
    ...
}
...

The View is like this : https://i.sstatic.net/Oa7Vt.jpg

Why my css display irregular?

Any solution to solve my problem?

Thank you very much

Improve this question
5
  • With css irregular you mean that your table content doesn't line out correctly? Commented Jan 26, 2016 at 10:36
  • @Frank W., Any solution to solve my problem? I'm still difficulties to implement in my case Commented Jan 26, 2016 at 12:15
  • Post you table css and ill see what i can do Commented Jan 26, 2016 at 12:47
  • See my updated answer showing how 3 minor changes will fix your code. The table is then built correctly and the header and row columns align. Commented Jan 26, 2016 at 18:17
  • @Roberto, Ok, Thank you very much. It's working Commented Jan 26, 2016 at 19:41

2 Answers 2

Reset to default
1

The short answer is that you can not build a table in that way.

Your first snippet of code appends the table headers. Then DOM automatically adds closing table tag.

Your next snippet of code runs a loop to append rows. However, the table was already created in the previous step.

So you end up with 2 tables in the DOM which don't align.

Suggest building the table as a string and then appending that string to the div so that the DOM builds a single table.

UPDATE:

This code, in response to OP comment, demonstrates how to make the original code work with just 3 very minor changes. The table is first built as a string. The string is then appended to the innerHTML of the container. Doing it this way prevents the DOM from prematurely adding a closing tag to the table element, as was the case in the original code.

And now the table header and rows align, which was the stated problem.

Click the "Run code snippet" button to see it work. 

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I need you help. look here : stackoverflow.com/questions/37209847/…
0

Do you mean that the table content is not aligned properly? Verify your CSS that there is no width property on your TD element.

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;
}

Fiddle: https://jsfiddle.net/vup7vz1k/1/

Improve this answer

5 Comments

A question within an answer is a comment?
You should read the rest after the first line. My solution applies to the question I ask if that is what the poster wants. If you have a better interpretation, post your answer yourself.
I will only post an answer if i'm sure it's the answer to what the question is. This is why we've got the option to post comments.
There is no punishment for an incorrect answer. People can correct me so I can adjust my answer. Just keep SO an user friendly environment to ask and answer questions. This is also not the right place to discus these things. If you think that my answer violates the rules, flag my answer.
@com2ghz, I have seen your answer. But I'm still diffilcuties to implement in my case

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.