Add row under same category - html

I'm trying to have a table according to value from another table so if I choose an item from table 1 it will create a new items row in table 2 and these items will be ordered and every item from the same category will be list under the title of this category.
this is a picture of how the result will be :
this is the sample code.
$("#table tr").click(function(){
var row=$('<tr><td><td></tr>>')
row.appendTo('#add')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Add item</h1>
<table id="table">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr class="A">
<td id="1">A1</td>
<td id="2">1</td>
</tr>
<tr class="A">
<td>A3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr class="B">
<td>B1</td>
<td>2</td>
</tr>
<tr class="B">
<td>B3</td>
<td>4</td>
</tr>
<tr class="B">
<td>B1</td>
<td>2</td>
</tr>
<tr class="B">
<td>B3</td>
<td>4</td>
</tr>
</table>
<div>
</div>
<div>
</div>
<br>
<table id="add">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr>
<td>A1</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr>
<td>B2</td>
<td>3</td>
</tr>
<tr>
<td>B3</td>
<td>2</td>
</tr>
</table>
</body>
</html>


One way to achieve this would be to use data attributes on each row of the source and destination tables. This way you can determine the group the source row came from so that you can place it in the same group in the destination table.
Also note that I added a class, .copyable-row, to each tr which is allowed to be cloned to the second table. Your current logic allowed the table headers themselves to be copied.
let $dest = $('#add');
$("#table tr.copyable-row").click(e => {
let $tr = $(e.currentTarget);
let group = $tr.data('group');
let $target = $dest.find(`tr[data-group="${group}"]:last`);
$tr.clone().insertAfter($target);
});
table {
margin: 0 0 10px;
}
table,
th,
td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr class="copyable-row" data-group="a">
<td>A1</td>
<td>1</td>
</tr>
<tr class="copyable-row" data-group="a">
<td>A3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B1</td>
<td>2</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B3</td>
<td>4</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B1</td>
<td>2</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B3</td>
<td>4</td>
</tr>
</table>
<table id="add">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr data-group="a">
<td colspan="2">Class A</td>
</tr>
<tr data-group="a">
<td>A1</td>
<td>4</td>
</tr>
<tr data-group="b">
<td colspan="2">Class B</td>
</tr>
<tr data-group="b">
<td>B2</td>
<td>3</td>
</tr>
<tr data-group="b">
<td>B3</td>
<td>2</td>
</tr>
</table>

Related

how to create an html table with specific rows and columns

I had a problem while creating a small table with specific details like in the pic enter image description here
I did this code but it doesn't give the wanted results
<html>
<head>
<style>
table,td,th{border: 2px solid gray; text-align:center}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="4">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="8">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6<td>
<td>7<td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>

Use </td> instead of <td> for the closing tags of boxes 6 and 7. The colspan for box 2 is not necessary. The other three colspans were too large. This code should get you to Figure 2.
<table width="30%">
<tr>
<td colspan="3">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="3">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="2">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>

This would make the first figure:
<table width="30%">
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="4">5</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="3">6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td rowspan="2">10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>

There were some errors in your html related to closing </td> tags. This should work:
<html>
<head>
<style>
table,
td,
th {
border: 2px solid gray;
text-align: center
}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="5">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="6">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6</td>
<td colspan="2">7</td>
<td colspan="2">8</td>
</tr>
<tr>
<td colspan="2">9</td>
<td colspan="2">10</td>
<td colspan="2">11</td>
<td colspan="2">12</td>
</tr>
</table>
</body>
</html>
Demo: https://jsfiddle.net/js2ye3uo/

Make TH equals to 3 columns in HTML

Hello, I want to make ACTIONS equal to three columns
As shown in image, I want ACTIONS in center of Detail Update Delete
Please help.

<table border=1>
<tr>
<th>NAME</th>
<th>AGE</th>
<th colspan="3">ACTIONS</th>
</tr>
<tr>
<td>Salman Mushtaq</td>
<td>27</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
<tr>
<td>Muhanmmad Awais</td>
<td>32</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</tr>
<tr>
<td>Imran Hassan</td>
<td>38</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</tr>
<tr>
<td>Muhammad Asad</td>
<td>33</td>
<td>Detail</td>
<td>Update</td>
<td>Delete</td>
</tr>
</table>
Try to search about colspan and rowspan

Use colspan attribute in TH tag (ie. colspan="3")
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th colspan="3">Action (spanned 3 cols)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>action 1</td>
<td>Action 2</td>
<td>Action 3</td>
</tr>
</tbody>
</table>

How to separate nested table conspicuously?

How can i separate nested table in lower table as conspicuously as in upper table?
Upper table is not proper though.
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Here is my code:
.my-table {
border: 1px solid #000;
}
.my-table tr:nth-child(even) {
background: #ddd;
}
.my-table tr:nth-child(odd) {
background: #fff;
}
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
<td>Finance</td>
<td>Time 3</td>
<td>Time 5</td>
<td>Bad</td>
<td>Good</td>
</tr>
</table>
<table>
<tr>
<td>Crossroad</td>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
<td>Ok</td>
<td>danke</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody T</td>
<td>G</td>
<td>
<table>
<tr>
<td>Trades</td>
</tr>
<tr>
<td>Position</td>
</tr>
</table>
</td>
<td>Latest</td>
<td>TIME 1</td>
<td>TIME 2</td>
<td>Good</td>
<td>My Comments</td>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
</tr>
<tr>
<td>Crossroad</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Finance</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 3</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Time 5
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Bad</td>
</tr>
<tr>
<td>Ok</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Good</td>
</tr>
<tr>
<td>danke</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table>

To answer the question:
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Vertically aligning your table cells will bring the content to the top of the cells, regardless of how many lines of content follows.
.my-table td {
vertical-align: top;
}
JSFiddle Example: https://jsfiddle.net/jennifergoncalves/y1Lr0mzw/
Please let me know if I missed what you were trying to accomplish.

HTML: td layout issue

Really couldn't draw something good here, so drew it in Excel.
Here is I tried to render some code in HTML:
<table>
<thead>
<th>
<th>
<th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<p></p>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<table>

Use colspan to merge across columns like so:
<tr>
<td colspan="3">This is how I want it to look</td>
</tr>
Demo

<table border=1>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="3">7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

th,
td {
border: 1px solid #cfcfcf;
padding: 10px;
}
<table>
<tr>
<th>TH</th>
<th>TH</th>
<th>TH</th>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td colspan=3>TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
</table>

How do I create an HTML table with the following structure?

I'm trying to create a table with the following structure.
I've been reading various sites and blogs to try to create this myself, but I have failed, terribly, and decided to ask for help here.
So far, I've been able to create the outer structure:
<table border='1' style="width:100%">
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Bak</td>
<tr></tr>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Bak</td>
<td>Baz</td>
</tr>
</table>
But I can't figure out how to add the fields for Name, Number, and Cost. How do I nest it?

Use rowspan to cause a cell to appear in multiple rows, headers to link your data cells with header cells that aren't in traditional positions, and tbody to describe subdivisions of a table.
table, td, th {
border-collapse: collapse;
border: solid black 1px;
padding: 3px;
}
<table>
<tbody>
<tr>
<td rowspan="3"> ...
<th id="name_1"> Name
<td headers="name_1"> ...
<tr>
<th id="number_1"> Number
<td headers="number_1"> ...
<tr>
<th id="cost_1"> Cost
<td headers="cost_1"> ...
<tbody>
<tr>
<td rowspan="3"> ...
<th id="name_2"> Name
<td headers="name_2"> ...
<tr>
<th id="number_2"> Number
<td headers="number_2"> ...
<tr>
<th id="cost_2"> Cost
<td headers="cost_2"> ...
</table>

You need to use rowspan JSFIDDLE
<table border="1">
<tr>
<td rowspan="3"></td>
<td>Name</td>
<td>&nbsp</td>
</tr>
<tr>
<td>Number</td>
<td> </td>
</tr>
<tr>
<td>cost</td>
<td> </td>
</tr>
<tr>
<td rowspan="3"></td>
<td>Name</td>
<td>&nbsp</td>
</tr>
<tr>
<td>Number</td>
<td> </td>
</tr>
<tr>
<td>cost</td>
<td> </td>
</tr>
</table>

try fiddle fiddle
<table border='1' style="width:100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="3">some</td>
<td>Name</td>
<td>11</td>
</tr>
<tr>
<td>No</td>
<td>22</td>
</tr>
<tr>
<td>Cost</td>
<td>22</td>
</tr>
</table>

User rowspan
<table border="1">
<tr>
<td rowspan="3">Data Section 1</td>
<td>Some Data 1.1</td>
</tr>
<tr>
<td>Some Data 1.2</td>
</tr>
<tr>
<td>Some Data 1.3</td>
</tr>
<tr>
<td rowspan="3">Data Section 2</td>
<td>Some Data 2.1</td>
</tr>
<tr>
<td>Some Data 2.2</td>
</tr>
<tr>
<td>Some Data 2.3</td>
</tr>
</table>

<table border='1' style="width: 100%">
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>

In general way like this
<table border="1">
<tr>
<td rowspan="3">1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
</tr>
</table>
http://jsfiddle.net/s5b0c5d9/