asked on

Adjust list

Hi,
Where to adjust to have clear boundary to each record below?
http://my-friend.co/Test_rec4/Default.aspx?userid=mc23

Here are two records below and I expect to have one clear boundary to each record

Leonidas Dosas

I get your table html to give a solution like the following: First I count all the rows that have the info record, and then I wrapped them via for loop.
Jquery code

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
  <style>
.new{
  border: 3px solid red;
}
  </style>
</head>
<body>
<!-- Start your code here -->

<table style="width:70%" class="table table-responsive table-striped table-hover">
<tbody>
<tr class="houserow" data-id="太古城一期三座"><td>House Name: </td><td colspan="3">太古城一期三座</td><td rowspan="3"><img class="imgHouse" src="ImageHandler.ashx?ImID=12"></td></tr>
<tr class="houserow"><td>Address: </td><td>东区太古城道三号</td><td></td></tr>
<tr class="houserow"><td>Price: </td><td>港币</td><td>20000</td></tr>
<tr class="houserow" data-id="太古城一期三座4D室"><td>House Name: </td><td colspan="3">太古城一期三座4D室</td><td rowspan="3"><img class="imgHouse" src="ImageHandler.ashx?ImID=12"></td></tr>
<tr class="houserow"><td>Address: </td><td>东区太古城道三号</td><td></td></tr>
<tr class="houserow"><td>Price: </td><td>港币</td><td>20000</td></tr>
<tr class="houserow" data-id="太古城一期三座4C室"><td>House Name: </td><td colspan="3">太古城一期三座4C室</td><td rowspan="3"><img class="imgHouse" src="ImageHandler.ashx?ImID=12"></td></tr>
<tr class="houserow"><td>Address: </td><td>东区太古城道三号</td><td></td></tr>
<tr class="houserow"><td>Price: </td><td>港币</td><td>20000</td></tr>
<tr class="houserow" data-id="太古城一期三座4B室"><td>House Name: </td><td colspan="3">太古城一期三座4B室</td><td rowspan="3"><img class="imgHouse" src="ImageHandler.ashx?ImID=12"></td></tr>
<tr class="houserow"><td>Address: </td><td>东区太古城道三号</td><td></td></tr><tr class="houserow"><td>Price: </td><td>港币</td><td>20000</td></tr>
<tr class="houserow" data-id="太古城一期三座4A室"><td>House Name: </td><td colspan="3">太古城一期三座4A室</td><td rowspan="3"><img class="imgHouse" src="ImageHandler.ashx?ImID=12"></td></tr>
<tr class="houserow"><td>Address: </td><td>东区太古城道三号</td><td></td></tr>
<tr class="houserow"><td>Price: </td><td>港币</td><td>20000</td></tr>
<tr class="houserow" data-id="太古城一期三座5B室"><td>House Name: </td><td colspan="3">太古城一期三座5B室</td><td rowspan="3"><img class="imgHouse" src="ImageHandler.ashx?ImID=12"></td></tr>
<tr class="houserow"><td>Address: </td><td>东区太古城道三号</td><td></td></tr>

<!--the other rows below here.....-->
</tbody>
</table>

<!-- End your code here -->
  <script>
var rows=$('tr.houserow').length;
var divElm=$('div.wrap');

for(var i=0;i<=rows;i+=3){
  $('tr.houserow').slice(i, i+3).wrapAll("<div class='new'></div>");
}
  </script>
</body>
</html>

Open in new window

HainKurt

try this

<table style="width:100%"...
<colgroup>
    <col width=140>
    <col>
    <col width=140>
    <col>
    <col width=170>
</colgroup>
<tr>...</tr>

Open in new window

you cannot fix row height, since it is 50-60px each, because image is 150px height

Peter Chan

ASKER

Thanks to all.

Huseyin,

Within my current .aspx, I cannot find out relevant "table" to such list.

HainKurt

you have that table!

<table style="width:70%" class="table table-responsive table-striped table-hover">
>>>> add line 2-8 above here... and change 70% to 100%
<tbody>

Open in new window

it is in javascript1.js, line 158

html += "<table style='width:70%' class='table table-responsive table-striped table-hover'>";

Open in new window

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Chan

ASKER

Sorry, I've put this line

html += "<colgroup><col width=140 /><col /><col width=140 /><col /><col width=170/></colgroup>";

Open in new window

but I do not see the boundary, after re-deployment

HainKurt

first, you did not replace your code with those two lines
second, even you did not add the line above...

so nothing is changed of course...

http://my-friend.co/Test_rec4/JavaScript1.js

HainKurt

but I do not see the boundary, after re-deployment

does it mean, you tried, did not work and removed again?

maybe I could not get what you are trying to do...

HainKurt

are you trying to separate house data?
try 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_name + "'>";
                html += "<td>House Name: </td><td colspan=3>" + house.house_name + "</td>";
                html += "<td rowspan=3>" + img + "</td>"
                html += "</tr>";

                html += "<tr class='houserow'>";
                html += "<td>Address: </td><td>" + house.address1 + "</td>";
                html += "<td colspan=2>" + house.address2 + "</td>";
                html += "</tr>";

                html += "<tr class='houserow'>";
                html += "<td>Price: </td><td>" + house.price_curr + "</td>";
                html += "<td>" + house.price + "</td>";
                html += "</tr>";

                html += "<tr><td colspan=5 class="seperator"></td></tr>";
            });

Open in new window

+ css

.seperator{
  height:50px;
}

Open in new window

see this demo

https://jsfiddle.net/u6au4jm4/

Peter Chan

ASKER

I add this line

html += "<tr><td colspan=5 class='seperator'></td></tr>";

Open in new window

and the css part, but I still see no change, after re-deployment.

HainKurt

I can see 50px gap between houses...

clear cache, or Ctrl+F5 to refresh

HainKurt

use this to make it white, and 30px looks good

.seperator {
    height: 30px;
    background-color: white;
}

Open in new window

Peter Chan

ASKER

Thanks a lot.
I re-deploy it but I do not see white boundary, between the rows. Any advice?

HainKurt

I see this css

.seperator {
    height: 15px;
    background-color: white;
}

Open in new window

and can see 15px white area between houses...
it looks ok...

Peter Chan

ASKER

HI HainKurt,
Can you please see this

https://www.experts-exchange.com/questions/29042667/Add-button.html

if available?