Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a master-detail table with HTML, CSS and jQuery

See on this article how to develop a table with master-detail structure using HTML, CSS and jQuery.

It is common on commercial applications the using of tables in order to exhibit data in the format master-detail, where each line of the most external table can possess another table with details that reference an external register.

One example of this is the Listing of sales with the detailing of the items of the selling. Let's take then this situation as a base to the development of this article, which objective is to present a simple solution of how to develop a table with a master-detail relationship using HTML, CSS and jQuery.

It's important to remember that is not the point of this article to discuss the origin of the exhibited information, or how they'll be inputted in the table, ergo, we'll work with static data.

In the table, we'll have one line to show the selling's data, and next, one line to the selling's items. This way, alternately for quantity of sold items that might have been, in that case, just two for example.

The Listing 1 presents the HTML structure of the table that'll be used.

Listing 1: HTML table used in the example

 <table id="tbSales" rules="rows">
	<thead>
		<tr>
			<th></th>
			<th>ID</th>
			<th>Date</th>
			<th>Items</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
		<tr class="saleRow">
			<td></td>
			<td>01</td>
			<td>01/01/2001</td>
			<td>2</td>
			<td>10,00</td>
		</tr>
		<tr class="itemsRow">
			<td colspan="5">
				Itens
				<table class="tbItems" rules="rows">
					<thead>
						<tr>
							<th>ID</th>
							<th>Description</th>
							<th>Quantity</th>
							<th>Unit Price</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>A1</td>
							<td>Product A 1</td>
							<td>1</td>
							<td>7,00</td>
						</tr>
						<tr>
							<td>A2</td>
							<td>Product A 2</td>
							<td>1</td>
							<td>3,00</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
		<tr class="saleRow">
			<td></td>
			<td>02</td>
			<td>02/02/2001</td>
			<td>3</td>
			<td>20,00</td>
		</tr>
		<tr class="itemsRow">
			<td colspan="5">
				Itens
				<table class="tbItems" rules="rows">
					<thead>
						<tr>
							<th>ID</th>
							<th>Description</th>
							<th>Quantity</th>
							<th>Unit Price</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>B1</td>
							<td>Product B 1</td>
							<td>1</td>
							<td>10,00</td>
						</tr>
						<tr>
							<td>B2</td>
							<td>Product B 2</td>
							<td>2</td>
							<td>5,00</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	<tbody>
</table>
<p>As have been said, we have, in alternate lines, the head of the selling and its items. In the line of the items, we have only one column containing another table that, on the other hand, exhibits the information of the products of the selling.</p> <p>Now, we'll apply a sheet of styles to give the tables one more adequate appearance and to make the lines of the items initially invisible. The CSS code is shown on Listing 2.</p> <p><strong>Listing 2:</strong> Sheet of styles applied to the document</p>
#tbSales, .tbItems{
	width:100%;
	border:solid 1px;
}

#tbSales thead th, .tbItems thead th{
	text-align:left;
}

#tbSales tr td, .tbItems tr td{
	border:solid 1px;
}

#tbSales tr td:nth-child(1){
	width:20px;	
}

#tbSales tbody tr{
	background:#DCDCDC;
}

.tbItems tr{
	background:red;
}

#tbSales thead{
	background:#4682B4;
}

.itemsRow{
	display: none;
}

.tbItems{
	font-size:12px;
} 

Once the tables been formatted, we need to implement the functionality of expansion of the details line. This generally is done with a button in the master line (sales) then we follow this pattern and add one image in the first column of the lines of sales. Notice that we really left a blank column on each line, which will be filled with a tag <img> dynamically inserted via jQuery.

The way how the script will be treated, if inserted rightly into the HTML document or kept in an external file will not influence now, ergo, the reader can choose any way. However, it's important to remember to reference the jQuery library, what is shown on the Listing 3.

Listing 3: jQuery library reference

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Insert the button in the first column of sales isn't a tough task, a single line one code can be used to solve it, as can be seen on the Listing 4.

Listing 4: Inserting a button to expand the details of the sellings

$(".linhaVenda td:nth-child(1)").html("<img src=’botao.png' class='btnDetalhe'/>"); 

The image used can be any one, as the reader likes, it's only suggested that the dimensions be similar to 16x16, in order to have an "adequate" button to the table.

The next step is, then, treat the clicking on that image to expand the line below of which have been clicked on. As we'll see on the Listing 5, the code to this function is also very simple.

Listing 5: Button click to expand the detail's line

$(".btnDetail").click(function(){
	var index = $(this).parent().parent().index();
	var detail = $(this).parent().parent().next();
	var status = $(detail).css("display");
	if(status == "none")
		$(detail).css("display", "table-row");
	else
		$(detail).css("display", "none")
});

First of all we obtain the index of the clicked line (use the function parent() twice because what received the click was the image that's inside the column that, on the other hand, is inside the line in which we want to get the index) and, having it, we can select the next line using the function next(). Have this been done, we can identify the state of the details line, if it is already expanded, we hide it, otherwise, we can expand it using the CSS property display.

As this code is executed, alongside with the application of the sheet of styles in the HTML file, we should have a result similar to the Figure 1's.

Implemented master-detail table

Figure 1: Implemented master-detail table

In the Figure, the first selling is with its details expanded, while the second one keeps them hidden. Clicking on the button (in the Figure, a blue image in the corner), the items of the selling should be exhibited and hidden.

Despite simple, it'll be pleasant if the codes here can be of use, helping whoever may need develop this kind of table. It wasn't our point here the appearance of the elements, ergo, the reader can work in the sheet of styles to give the page one appearance adequate to one's needs.

Appreciate the attention. See you all next time.



Microsoft MVP, Bachelor in Science And Technology, Editor and Consultant at DevMedia with more than 7 years of experience in software development.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login