Add words to existing layout

Hi,
I want to add some words to highlighted place below,
22b.png
what to adjust/add below?

            $.each(response.d, function (index, house) {
                var img = (house.house_name != "") ? "<img class='imgHouse' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a></td>";
                html += "</tr>";
                ...

Open in new window

LVL 11
HuaMin ChenSystem AnalystAsked:
Who is Participating?
 
Julian HansenCommented:
Remove the rowspan=5 in the last column.
The for each row make sure you add a <td></td> for the last column
In the first row put your text
In the third row put your button
Row 1
html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a>abcd</td>";
                html += "</tr>";

Open in new window

Row 2
Remember to add the extra <td></td> at the end of the row
Row 3
html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >实用面积</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.area_size.toString() + "</td>";
                html += "<td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.area_unit + "</td>";
                html += "<td class='right2' >查询次数</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=3>" + house.request_times.toString() + "</td>";
                html += "<td><button>Button</button>";
                html += "</tr>";

Open in new window

Row 4
Remember to add the extra <td></td> at the end of the row
Row 5
Remember to add the extra <td></td> at the end of the row
0
 
Julian HansenCommented:
What do you want to add where - what distinguishes those rows from the others?

Why can't you just put the words into the markup in the script?
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Hi,
Can you please show me how to adjust
            $.each(response.d, function (index, house) {
                var img = (house.house_name != "") ? "<img class='imgHouse' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a></td>";
                html += "</tr>";
                ...

Open in new window


to put words at the highlighted place in above?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Julian HansenCommented:
Where do you want to put them?
You have shown me a template for a row in a table but you have not said into which cell you want the text to be placed.
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Do you see the highlighted place in above? That is where I want to put the words.
0
 
Julian HansenCommented:
Which highlighted place - if you mean the highlighted row in the image - you have highlighted an entire row.

For instance if you want add Banana to the first cell you would do this
            $.each(response.d, function (index, house) {
                var img = (house.house_name != "") ? "<img class='imgHouse' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >BANANA" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a></td>";
                html += "</tr>";
                ...

Open in new window

0
 
HuaMin ChenSystem AnalystAuthor Commented:
I do what you've suggested. But it is now putting in highlighted place (yellow) while I expect it to be AT RED place.

22c.png
0
 
Julian HansenCommented:
Thank you, that's exactly what I have been trying to establish
To add it to the last cell so do this
            $.each(response.d, function (index, house) {
                var img = (house.house_name != "") ? "<img class='imgHouse' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a>BANANA</td>";
                html += "</tr>";
                ...

Open in new window

0
 
Julian HansenCommented:
@HuaMinChen,

it appears I am colour blind. I see your original post included a red square where you wanted the text.

Please accept my sincerest apologies.
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Thanks Julian. Where are your added words?
0
 
Julian HansenCommented:
Line 7 - BANANA (scroll to the right)
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Using these

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a>abcd</td>";
                html += "</tr>";

Open in new window


I get
22d.png
but I still want to place the text in Red area!
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Hi,
Any help?
0
 
Julian HansenCommented:
The Markup you posted is for a single row. If you want to update a different row then you need to change the markup for that specific row.

In other words - you need to update row 1 - but you posted code that is updating row 3 - you need to update the code that draws row 1.
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Where to adjust below?
            $.each(response.d, function (index, house) {
                var img = (house.house_name != "") ? "<img class='imgHouse' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a>abcd</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >建筑面积</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.construct_area_size.toString() + "</td>";
                html += "<td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.area_unit + "</td>";
                html += "<td class='right2' >" + (site_lang === "ENG" ? "价格 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.price_curr + "</td>";
                html += "<td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.price.toString() + "</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >实用面积</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.area_size.toString() + "</td>";
                html += "<td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.area_unit + "</td>";
                html += "<td class='right2' >查询次数</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=3>" + house.request_times.toString() + "</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >更新日期</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.upd_date + "</td>";
                html += "<td >点击次数</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=3>" + house.clicked_times.toString() + "</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >类型</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.rent_type + "</td>";
                html += "<td >" + (site_lang === "ENG" ? "地址 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.address1 + "</td>";
                html += "<td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.address2 + "</td>";
                html += "</tr>";

                html += "<tr style='background-color: transparent;'><td colspan=6 class='seperator'></td></tr>";
            });

Open in new window

0
 
Julian HansenCommented:
In the first row line 7

The rows of the table are defined as follows.
Lines 4 - 8 Table Row 1
Lines 10 - 15 Table Row 2
Lines 17 - 21 Table Row 3
Lines 23 - 26 Table Row 4
Lines 28 - 34 Table Row 5
0
 
HuaMin ChenSystem AnalystAuthor Commented:
I want to add the word 2 rows above the button (end of 1st row on showing area), then where to put it below?
                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a>abcd</td>";
                html += "</tr>";

Open in new window

0
 
Julian HansenCommented:
As I said, at the end of line 7
            $.each(response.d, function (index, house) {
                var img = (house.house_name != "") ? "<img class='imgHouse' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a>AS FAR AS I CAN TELL IG GOES HERE</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >建筑面积</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.construct_area_size.toString() + "</td>";
                html += "<td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.area_unit + "</td>";
                html += "<td class='right2' >" + (site_lang === "ENG" ? "价格 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.price_curr + "</td>";
                html += "<td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.price.toString() + "</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >实用面积</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.area_size.toString() + "</td>";
                html += "<td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.area_unit + "</td>";
                html += "<td class='right2' >查询次数</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=3>" + house.request_times.toString() + "</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >更新日期</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.upd_date + "</td>";
                html += "<td >点击次数</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=3>" + house.clicked_times.toString() + "</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >类型</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.rent_type + "</td>";
                html += "<td >" + (site_lang === "ENG" ? "地址 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' >" + house.address1 + "</td>";
                html += "<td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.address2 + "</td>";
                html += "</tr>";

                html += "<tr style='background-color: transparent;'><td colspan=6 class='seperator'></td></tr>";
            });

Open in new window

See where I added the code in caps
0
 
HuaMin ChenSystem AnalystAuthor Commented:
I put it like

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a>abcd</td>";
                html += "</tr>";

Open in new window

and here is what I've got
22h.pngwhich is incorrect.
0
 
Julian HansenCommented:
@HuaMinChen
I see the problem, this is about cell alignment - in the last cell do this
                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.house_name + "</td><td >地区</td><td style='font-weight: bold;Font-size:16px;Font-family:標楷體;color: #2D2D85;' colspan=2 >" + house.area + "</td>";
                html += "<td rowspan=5 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=5 style="vertical-align: top"><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>删除记录</a>abcd</td>";
                html += "</tr>";

Open in new window

The text is in the right place but because that last cell is a rowspan it is covering multiple rows as a single cell and by default vertical-align is middle so the text is appearing in the middle.
Add the style="vertical-align: top" to the last cell and that should fix the problem
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Sorry, using your codes, I get
22k.pngbut I want to put button in Red area. How?
22k.png
0
 
Julian HansenCommented:
Are we going in circles here.

Your question was how to place the text in the red rectangle shown in your opening post - which we have now done

Now you want to add a button?

My question is - why is the last column a row span - are you sure that is what you want here?
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Originally there is button (in Yellow) below but I want to add words in Red area. How?

22l.png
0
 
Julian HansenCommented:
My question is - why is the last column a row span - are you sure that is what you want here?
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Yes.

Is there now a way to put Text at Red area?
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Yes.

Is there now a way to put Text at Red area?
0
 
Julian HansenCommented:
You did not answer my question as to why you have the last column as a row span - it makes no sense and it is preventing you from easily getting the result you want.

So I ask again,

Why do you have a rowspan in the last column - if you did not have this you could just put the button in the row that you want it to be in - by making it a row span you make the last column for the 5 rows a single cell - which means to get the button in there you will have to put it after the text with a break <br>

But that is not going to line up correctly with the row.

Bottom line - lose the row span and put the text in the top row of the last column and the button in the third row.
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Sorry, should I only adjust such rowspan part?
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Can I have more details to adjust it?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.