Copying HTML table to clipboard

[Ak Chakraborty]

I want to copy my HTML table elements to the clipboard. But I have used div tag inside the td tag of the table. I think that what adding a new line after pasting the contents from the clipboard. I want that to stay in the same line. Please help how to make it possible.

Sample Output


ProfileUID : 12345  
First Name : John  
Email : [e-mail]  
Profile Status : Enabled  
Country Code : United States (+1)  
Phone No. :  
[phone]  

Last Generated OTP : x5xx555  
Employee ID : 223344  
User ID : johndoe  

Required Output

ProfileUID : 12345  
First Name : John  
Email : [e-mail]  
Profile Status : Enabled  
Country Code : United States (+1)  
Phone No. : [phone]  
Last Generated OTP : x5xx555  
Employee ID : 223344  
User ID : johndoe  

*Look at the Phone No. in the above outputs.*

index.html

<div style="margin-left: 2rem">
	<button class="btn btn-primary" type="button" style="background-color: #001872; display: none" onclick="copyTable(document.getElementById('table'))" id="copy"> <i class="fa-regular fa-copy"></i> </button>
</div>

<table class="table table-striped table-hover" style="display: none" id="table">
	<tbody>
		<tr align="center">
			<th style="width: 20%" class="col-sm-4 text-center" scope="row">ProfileUID :</th>
			<td style="width: 50%"></td>
		</tr>
		<tr align="center">
			<th style="width: 20%" class="col-sm-4 text-center" scope="row">First Name :</th>
			<td style="width: 50%"></td>
		</tr>
		<tr align="center">
			<th style="width: 20%" class="col-sm-4 text-center" scope="row">Email :</th>
			<td style="width: 50%"></td>
		</tr>
		<tr align="center">
			<th style="width: 20%" class="col-sm-4 text-center" scope="row">Profile Status :</th>
			<td style="width: 50%"></td>
		</tr>
		<tr align="center">
			<th style="width: 20%" class="col-sm-4 text-center" scope="row">Country Code :</th>
			<td style="width: 50%"></td>
		</tr>
		<tr>
			<th style="width: 20%" class="col-sm-4 text-center" scope="row" style="padding-top: 12px;"> Phone No. :</th>
			<form action="" method="post" id="form2" style="display: inline-block;"> {% csrf_token %}
				<td style="width: 50%">
					<div style="display: flex; justify-content: space-between;">
						<div style="width: 25%;" id="1"></div>
						<div style="width:100%; border: 0px solid red; align-self: center; text-align: center;" id="2"></div>
						<div style="border: 0px solid blue; width: 25%; text-align: right">
							<button type="button" id="edit" style="border-style: none; background-color:transparent; color:#001872;" onclick="edits()"><i class="fa-solid fa-square-pen fa-2x"></i> </button>
							<button type="submit" id="save" style="display:none; border-style: none; background-color:transparent; color:#17d647e8; padding: 2px;" onclick="saved()"><i class="fa-solid fa-square-check fa-2x"></i></button>
							<button type="button" id="cancel" style="display:none; border-style: none; background-color:transparent; color:#c42c2c;"><i class="fa-solid fa-square-xmark fa-2x" onclick="canceled()"></i></button>
						</div>
				</td>
			</form>
		</tr>
		<tr align="center">
			<th style="width: 20%" class="col-sm-4 text-center" scope="row"> Last Generated OTP : </th>
			<td style="width: 50%"></td>
		</tr>
		<tr align="center">
			<th style="width: 20%" class="col-sm-4 text-center" scope="row">Employee ID :</th>
			<td style="width: 50%"></td>
		</tr>
		<tr align="center">
			<th style="width: 20%" class="col-sm-4 text-center" scope="row">User ID :</th>
			<td style="width: 50%"></td>
		</tr>
	</tbody>
</table>

script.js

function copyTable(el) {
  var body = document.body,
    range,
    sel;
  if (document.createRange && window.getSelection) {
    range = document.createRange();
    sel = window.getSelection();
    sel.removeAllRanges();
    try {
      range.selectNodeContents(el);
      sel.addRange(range);
    } catch (e) {
      range.selectNode(el);
      sel.addRange(range);
    }
  } else if (body.createTextRange) {
    range = body.createTextRange();
    range.moveToElementText(el);
    range.select();
  }
  document.execCommand("Copy");
}