我想复制我的HTML表格元素到剪贴板。但我已经使用了表的td标签内的div标签。我认为从剪贴板粘贴内容后添加一个新行是什么。我想留在同一行。请帮助如何使之成为可能。
- 示例输出**
配置文件UID:12345
姓名:约翰
电子邮件:约翰·杜@www.example.comxyz.com
配置文件状态:启用
国家代码:美国(+1)
- 电话号码**:
电话:+1 -456789125
上次生成的OTP:x5xx555
员工编号:223344
用户名:
- 所需输出**
配置文件UID:12345
姓名:约翰
电子邮件:约翰·杜@www.example.comxyz.com
配置文件状态:启用
国家代码:美国(+1)
- 电话号码**:电话:+1 -456789125
上次生成的OTP:x5xx555
员工编号:223344
用户名:
- 查看上述两个输出中的电话号码文本。*
- 索引. 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>
- 脚本. 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");
}
1条答案
按热度按时间ljsrvy3e1#
Div标记是块元素块元素使一个新行我想这个css代码会工作。