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 12
HuaMin ChenProblem resolverAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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 ChenProblem resolverAuthor 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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

HuaMin ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor Commented:
Thanks Julian. Where are your added words?
0
Julian HansenCommented:
Line 7 - BANANA (scroll to the right)
0
HuaMin ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor Commented:
Yes.

Is there now a way to put Text at Red area?
0
HuaMin ChenProblem resolverAuthor 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 ChenProblem resolverAuthor Commented:
Sorry, should I only adjust such rowspan part?
0
HuaMin ChenProblem resolverAuthor Commented:
Can I have more details to adjust it?
0
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.