javascript - 如何正确复制内部 HTML？
问题描述
我对 jQuery 比较陌生。我这里有问题。
这是我的 js 文件：
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
var accounts = $("table td:first-child").html(); //see this line
// Append table with add row form on add new button click
$(".add-new").click(function () {
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row =
"<tr>" +
"<td>" +
accounts +
"</td>" +
'<td><input type="text" class="form-control" name="debit" id="debit"></td>' +
'<td><input type="text" class="form-control" name="credit" id="credit"></td>' +
'<td><input type="text" class="form-control" name="description" id="description"></td>' +
"<td>" +
actions +
"</td>" +
"</tr>";
$("table").append(row);
$("table tbody tr")
.eq(index + 1)
.find(".add, .edit")
.toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function () {
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]:not(:first)');
input.each(function () {
if (!$(this).val()) {
$(this).addClass("error");
empty = true;
} else {
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if (!empty) {
input.each(function () {
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
});
这是 HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/dashboardAssets/img/favicon.png" />
<title>Create Transaction</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<!-- bootstrap theme -->
<link href="/dashboardAssets/css/bootstrap-theme.css" rel="stylesheet" />
<!-- font icon -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="/dashboardAssets/css/elegant-icons-style.css" rel="stylesheet" />
<link href="/dashboardAssets/css/font-awesome.min.css" rel="stylesheet" />
<th:block th:include="fragments :: dataTableCSS"></th:block>
<!-- Custom styles -->
<link href="/dashboardAssets/css/style.css" rel="stylesheet" />
<link href="/dashboardAssets/css/transaction-style.css" rel="stylesheet" />
<link href="/dashboardAssets/css/jquery-ui-1.10.4.min.css" rel="stylesheet" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css"
integrity="sha512-Fppbdpv9QhevzDE+UHmdxL4HoW8HantO+rC8oQB2hCofV+dWV2hePnP5SgiWR1Y1vbJeYONZfzQc5iII6sID2Q=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- container section start -->
<section id="container" class="">
<!-- header start -->
<th:block th:include="fragments :: header"></th:block>
<!--header end-->
<!--sidebar start-->
<th:block th:include="fragments :: sidebar"></th:block>
<!--sidebar end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa fa-bars"></i> Transaction</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i><a href="/dashboard">Home</a></li>
<li><i class="fa fa-bars"></i>Transaction</li>
<li><i class="fa fa-square-o"></i>Create Transaction</li>
</ol>
</div>
</div>
<!-- page start-->
<div class="row">
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8">
<h2>Create <b>Transaction</b></h2>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i>
Add New</button>
</div>
</div>
</div>
<table class="table table-bordered" aria-label="dataTable">
<thead>
<tr>
<th>Account</th>
<th>Debit</th>
<th>Credit</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="row-fluid"> <!-- i want to duplicate this -->
<select class="selectpicker" data-live-search="true">
<optgroup label="Customers">
<option th:text="${customer}" th:each="customer : ${customerAccounts}"></option>
</optgroup>
<optgroup label="Vendors">
<option th:text="${vendor}" th:each="vendor : ${vendorAccounts}"></option>
</optgroup>
<optgroup label="Assets">
<option th:text="${asset}" th:each="asset : ${assetAccounts}"></option>
</optgroup>
<optgroup label="Liabilities">
<option th:text="${liability}" th:each="liability : ${liabilityAccounts}"></option>
</optgroup>
<optgroup label="Expenses">
<option th:text="${expense}" th:each="expense : ${expenseAccounts}"></option>
</optgroup>
<optgroup label="Partner">
<option th:text="${partner}" th:each="partner : ${partnerAccounts}"></option>
</optgroup>
</select>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i
class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i
class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i
class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="panel panel-body">
<form action="/commitTransaction">
<button class="btn btn-primary" style="float:right" type="submit">Commit</button>
</form>
</div>
</div>
</div>
<!-- page end-->
</section>
<th:block th:include="fragments :: footer"></th:block>
</section>
</section>
<!--main content end-->
<!-- javascripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="/dashboardAssets/js/jquery.scrollTo.min.js"></script>
<script src="/dashboardAssets/js/jquery.nicescroll.js" type="text/javascript"></script>
<!-- bootstrap-select -->
<!--custome script for all page-->
<script src="/dashboardAssets/js/scripts.js"></script>
<script src="/dashboardAssets/js/transaction.js"></script>
<!-- Bootstrap Date-Picker Plugin -->
<script src="/dashboardAssets/js/bootstrap-datepicker.js"></script>
</body>
</html>
我在 macOS 上使用 Safari 浏览器。而且，当我运行此页面（在项目中）时，它显示的 HTML 如下：
<td>
<div class="row-fluid">
<div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle btn-default"
data-toggle="dropdown" role="button" title="cash in hand" aria-expanded="false"><span
class="filter-option pull-left">cash in hand</span> <span class="bs-caret"><span
class="caret"></span></span></button>
<div class="dropdown-menu open" role="combobox"
style="max-height: 204px; overflow: hidden; min-height: 106px;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off" role="textbox"
aria-label="Search"></div>
<ul class="dropdown-menu inner" role="listbox" aria-expanded="false"
style="max-height: 159px; overflow-y: auto; min-height: 61px;">
<li class="dropdown-header " data-optgroup="1"><span class="text">Customers</span></li>
<li data-original-index="0" data-optgroup="1" class="active"><a tabindex="0" class="opt "
data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span
class="text">cx</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1" data-optgroup="1"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">cz</span><span
class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2" data-optgroup="1"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">cy</span><span
class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li class="divider" data-optgroup="2div"></li>
<li class="dropdown-header " data-optgroup="2"><span class="text">Vendors</span></li>
<li data-original-index="3" data-optgroup="2"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">vx</span><span
class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="4" data-optgroup="2"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">vy</span><span
class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li class="divider" data-optgroup="3div"></li>
<li class="dropdown-header " data-optgroup="3"><span class="text">Assets</span></li>
<li data-original-index="5" data-optgroup="3"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">cash in
bank</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="6" data-optgroup="3" class="selected"><a tabindex="0" class="opt "
data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span
class="text">cash in hand</span><span
class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="7" data-optgroup="3"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span
class="text">furniture</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
<li class="divider" data-optgroup="4div"></li>
<li class="dropdown-header " data-optgroup="4"><span class="text">Liabilities</span></li>
<li data-original-index="8" data-optgroup="4"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">consultant
ali</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li class="divider" data-optgroup="5div"></li>
<li class="dropdown-header " data-optgroup="5"><span class="text">Expenses</span></li>
<li data-original-index="9" data-optgroup="5"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">business name
registeration</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="10" data-optgroup="5"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">water
filled</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li class="divider" data-optgroup="6div"></li>
<li class="dropdown-header " data-optgroup="6"><span class="text">Partner</span></li>
<li data-original-index="11" data-optgroup="6"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">aa</span><span
class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="12" data-optgroup="6"><a tabindex="0" class="opt " data-tokens="null"
role="option" aria-disabled="false" aria-selected="false"><span class="text">aa2</span><span
class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div><select class="selectpicker" data-live-search="true" tabindex="-98">
<optgroup label="Customers">
<option>cx</option>
<option>cz</option>
<option>cy</option>
</optgroup>
<optgroup label="Vendors">
<option>vx</option>
<option>vy</option>
</optgroup>
<optgroup label="Assets">
<option>cash in bank</option>
<option>cash in hand</option>
<option>furniture</option>
</optgroup>
<optgroup label="Liabilities">
<option>consultant ali</option>
</optgroup>
<optgroup label="Expenses">
<option>business name registeration</option>
<option>water filled</option>
</optgroup>
<optgroup label="Partner">
<option>aa</option>
<option>aa2</option>
</optgroup>
</select>
</div>
</div>
</td>
我真的不明白这个额外的 HTML 是从哪里来的，因为我的var accounts = $("table td:first-child").html();js 文件中的行无法复制并再次使用它。供参考，提供图像。请指导我。
在“帐户”列的第二行中，我想要第一行中存在的相同下拉列表。场景是，每当用户将在一行中添加详细信息（帐户、借方、贷方、描述）时，他将“添加”该行，然后单击“添加新”按钮以创建一个新行。这是我希望复制第一行中显示的所有相同帐户的地方。
任何帮助将不胜感激。
解决方案
推荐阅读
- c++ - 我错过了cin.get（）的东西吗？
- python - c$50 金融非整数被拒绝导致 Buy 未通过检查 50
- gps - 逆向工程 delorme PN60w 固件以修复 GPS 翻转
- javascript - 为什么使用忽略垃圾工件的方法替换段落内容不起作用？
- java - 使用 while 循环进行数据验证时出现问题
- python - 如何重定向输出
在python中将对象键入文本文件？ - python - 使用邮递员的 GET 请求正在工作，但它不适用于 python (HTTPSConnectionPool)
- node.js - 有没有办法使用嵌套创建批量更新 prisma 中的对象
- vue.js - 是否可以使用 Vue.js 将数据从模板发送到脚本？（v-bind 的逆）
- c - 为什么我的第一个值没有正确打印，但后面的每个值都正确打印