I need some help to populate a textbox when I click in my table line.
Here's my code
<script>
function moveNumbers(number){
document.getElementById("teste").value=number;
}
</script>
</head>
<body>
<div id="table" style="width: 600px; height: 100px; overflow-x:auto">
<table id="listeqpt">
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>VAD</th>
<th>Date Added</th>
</tr>
{% for i in vlist %}
<tr>
<td onclick="moveNumbers(this.value)">{{ i.eqpttype }}</td>
<td onclick="moveNumbers(this.value)">{{ i.serialnumber }}</td>
<td onclick="moveNumbers(this.value)">{{ i.vad }}</td>
<td onclick="moveNumbers(this.value)">{{ i.dateadded }}</td>
</tr>
{% endfor %}
</table>
</div>
<form name="teste">
<input id="teste" type="text">
</form>
With this code, I'm getting 'undefined' value in my textbox (and by the way, i need to populate one textbox with each information that i have in my table, so in this example 4 textboxes)
Thanks in advance
Updated your code to exclude templating stuff, but anyways, td elements don't have a value property. you just need to get the textContent and for good measure, use trim() to remove white space:
UPDATED CODE 11/9 Based on clarifying comment
<script>
function moveNumbers(index, number){
document.getElementById("teste" + index).value = number;
}
</script>
</head>
<body>
<div id="table" style="width: 600px; height: 100px; overflow-x:auto">
<table id="listeqpt">
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>VAD</th>
<th>Date Added</th>
</tr>
<tr>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 1</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 2</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 3</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 1 cell 4</td>
</tr>
<tr>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 1</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 2</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 3</td>
<td onclick="moveNumbers(this.cellIndex, this.textContent.trim())">row 2 cell 4</td>
</tr>
</table>
</div>
<form name="teste">
<input id="teste0" type="text">
<input id="teste1" type="text">
<input id="teste2" type="text">
<input id="teste3" type="text">
</form>
I found a way to do what I was looking for... check the code below:
<script>
function moveNumbers(number){
var Row = document.getElementById(number.toString());
var cells = Row.getElementsByTagName("td");
document.getElementById("teste0").value=cells[0].innerText;
document.getElementById("teste1").value=cells[1].innerText;
document.getElementById("teste2").value=cells[2].innerText;
document.getElementById("teste3").value=cells[3].innerText;
}
</script>
</head>
<body>
<div id="table" style="width: 900px; height: 300px; overflow-x:auto">
<table id="listeqpt">
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>VAD</th>
<th>Date Added</th>
</tr>
{% set count = 1 %}
{% for i in vlist %}
<tr id={{ count }} onclick="moveNumbers(this.id)">
<td>{{ i.eqpttype }}</td>
<td>{{ i.serialnumber }} </td>
<td>{{ i.vad }}</td>
<td>{{ i.dateadded }}</td>
</tr>
{% set count = count + 1 %}
{% endfor %}
</table>
</div>
<form name="teste">
<input id="teste0" type="text">
<input id="teste1" type="text">
<input id="teste2" type="text">
<input id="teste3" type="text">
</form>
Thanks for helping me with this....See ya
Related
I want to perform calculations at the end of every table (on a footer) in a single page.
Suppose I have two tables and I want to perform calculations on a Total Amount column.
How can I do that using Jquery and Javascript?
There might be more than two tables so please be sure it works on multiple tables on a single page.
These values in HTML table are gained using for loop in Django.
This image contains 2 HTML tables and I want calculations on both table on a total amount column.
<div class="row">
<div class="table-responsive col-md-6">
<table id="example" class="table table-striped table-bordered table-responsive-xl">
<caption style="caption-side:top; text-align: center;"><h3>Income</h3></caption>
<thead class="thead-dark">
<tr>
{# <th>S No.</th>#}
<th>Particulars</th>
<th>Description</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
{% for item in all_profit %}
{% if item.category.under == "Income" %}
<tr>
{# <td>{{ }} </td>#}
<td>{{item.category}}</td>
<td>{{item.category.desc}}</td>
<td>{{ item.balance }} </td>
</tr>
{% endif %}
{% endfor %}
</tbody>
<tfoot>
<tr class="totalColumn">
<td style="visibility:hidden;"></td>
<td>Total:</td>
</tr>
</tfoot>
</table>
</div>
I set same class for each income item's total amount then get them with Jquery and convert them to Int and calculate total.
$(document).ready(function() {
var total = 0;
$('.income-amount').each(function(i, obj) {
total += parseInt($(obj).text());
});
$('#income-total').text(total.toFixed(1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="row">
<div class="table-responsive col-md-6">
<table id="example" class="table table-striped table-bordered table-responsive-xl">
<caption style="caption-side:top; text-align: center;">
<h3>Income</h3>
</caption>
<thead class="thead-dark">
<tr>
<th>S No.</th>
<th>Particulars</th>
<th>Description</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 </td>
<td>A</td>
<td> </td>
<td class='income-amount'>2000.0 </td>
</tr>
<tr>
<td>1 </td>
<td>B</td>
<td> </td>
<td class='income-amount'>1400.0 </td>
</tr>
</tbody>
<tfoot>
<tr class="totalColumn">
<td style="visibility:hidden;"></td>
<td id='income-total'>Total:</td>
</tr>
</tfoot>
</table>
</div>
I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
I am generating a very simple table by binding a table to an array. And I use the contenteditable="true" so I can edit each cell data on the client side. Here is my code:
<table class="table">
<tr>
<th>Id</th>
<th>Value</th>
<th></th>
</tr>
<tr *ngFor="let item of keys">
<td>{{ item.id }}</td>
<td contenteditable="true">
{{ item.Value }}
</td>
<td>
<button type="button" (click)="printContent()" class="btn btn-primary">Print</button>
</td>
</tr>
</table>
How can I detect the text changes on the cell that has contenteditable set to true
I've been working to this kind of data in array
data:[
0:{
name:"Pervies, Peter"
details:[
{date:"2017-11-17",start_time:"08:00:00",end_time:"16:00:00"},
{date:"2017-11-18",start_time:"08:00:00",end_time:"16:00:00"}
]
}
1:{
name:"Ming, Edmund"
details:[
{date:"2017-11-17",start_time:"08:00:00",end_time:"17:00:00"},
{date:"2017-11-18",start_time:"08:00:00",end_time:"17:00:00"}
]
}
]
I want the data to be display like this:
But it always turn out like this:
I use this code below in distributing data in the table
<table>
<thead>
<tr class="text-center location text-white">
<th>Employee</th>
<th>Date</th>
<th>Time In / Time Out</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor= "let da of data; ">
<tr *ngFor= "let s of da.details">
<td>
<strong>{{da.name}}</strong>
</td>
<td>
{{s.date}}
</td>
<td>
<input type="time [value]="s.start_time">
<strong>/</strong>
<input type="time [value]="s.end_time">
</td>
</tr>
</ng-container>
</tbody>
</table>
can you help on how I should display my data in the table properly.
I'm using angular 2
Here is the code to arrange the data in row and col along with display the date in required format
<tbody>
<ng-container *ngFor= "let da of data; ">
<tr>
<td [rowSpan]="da.details.length+1">
<strong>{{da.name}}</strong>
</td>
</tr>
<ng-container *ngFor= "let s of da.details">
<tr>
<td > {{s.date | date:'MMM dd, yyyy'}}</td>
<td><input type=time [value]="s.start_time"><strong>/</strong><input type=time [value]="s.end_time"></td>
</tr>
</ng-container>
</ng-container>
</tbody>
What about
<table>
<thead>
<tr class="text-center location text-white">
<th>Employee</th>
<th>Date</th>
<th>Time In / Time Out</th>
</tr>
</thead>
<tbody>
<tr *ngFor= "let da of data; ">
<td>
<strong>{{da.name}}</strong>
</td>
<td colspan="2">
<tr *ngFor= "let d of da.details; ">
<td>{{d.date | date}}</td>
<td>
<input type="time" [value]="d.start_time"/>
<strong>/</strong>
<input type="time" [value]="d.end_time"/>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
Working demo
Try like this :
here demo link : demo
<table>
<thead>
<tr class="text-center location text-white">
<th>Employee</th>
<th>Date</th>
<th>Time In / Time Out</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of data">
<td>{{d.name}}</td>
<td>
<table>
<tr *ngFor="let c of d.details">
<td>
{{c.date}}
</td>
</tr>
</table>
</td>
<td>
<table>
<tr *ngFor="let s of d.details">
<td>
<input type="time" [value]="s.start_time">
<input type="time" [value]="s.end_time">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
try this
use parseDate custom function in your component
parseDate(dateString: string): Date {
if (dateString) {
return new Date(dateString);
} else {
return null;
}
}
and call the function where you want convert and the format by this way
{{parseDate(s.date) | date: 'MMM dd, yyyy'}}
note: Also consider #Saurabh Agrawal answer for your table format.
DEMO Result :
I'm starting coding. I'm using Symfony 3.3
I would like to hide ( and show ) a or some specifics rows on a table with a checkbox.
I tried with javascript and jquery. I would like that the hidden rows stay hide.
I don't know how to do this. Here is my twig
{% block body %}
<div class="container">
<h3>List of products</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Size</th>
<th>Charges</th>
<th>Price</th>
<th>Actions</th>
<th>Desactivation</th>
</tr>
</thead>
<tbody>
{% for catalogue in catalogues %}
<tr class="table">
<td>{{ catalogue.product}} </td>
<td>{{ catalogue.description }} </td>
<td>{{ catalogue.size}} </td>
<td>{{ catalogue.charge }} </td>
<td>{{ catalogue.price }}</td>
<td>
<span class="glyphicon glyphicon-edit"></span>
<span class="glyphicon glyphicon-remove"></span>
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
{% else %}
{% endfor %}
</tbody>
</table>
{% endblock %}
$('.hideshow').on('click',function(){
let cls = $(this).attr("data-id")
if ( $('#'+cls).css('display') == 'none' ){
$('.table tbody').find('#'+cls).show();
}else{
$('.table tbody').find('#'+cls).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>List of products</h3>
<div class="buttons">
<button type="button" data-id="tr1" class="hideshow">Hide/Show Row 1</button>
<button type="button" data-id="tr2" class="hideshow">Hide/Show Row 2</button>
<button type="button" data-id="tr3" class="hideshow">Hide/Show Row 3</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Size</th>
<th>Charges</th>
<th>Price</th>
<th>Actions</th>
<th>Desactivation</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>Product </td>
<td>Description </td>
<td>Size </td>
<td>Charges </td>
<td>Price</td>
<td>
Edit
Remove
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
<tr id="tr2">
<td>Product </td>
<td>Description </td>
<td>Size </td>
<td>Charges </td>
<td>Price</td>
<td>
Edit
Remove
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
<tr id="tr3">
<td>Product </td>
<td>Description </td>
<td>Size </td>
<td>Charges </td>
<td>Price</td>
<td>
Edit
Remove
</td>
<td><input type="checkbox" name="boutton35" value="Desactivation" />
</td>
</tr>
</tbody>
</table>