JavaScript / JQuery html元素附加不具有父級的屬性-沒有PHP版本
[英]JavaScript / JQuery html element append doesn't take attributes of parent - no PHP version
問題描述
我正在使用Jquery after方法將HTML行追加到現有行，但是父級的屬性未繼承。 我究竟做錯了什么？
<html>
<head>
<title>AppendTest_min</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body bgcolor="Teal">
<div class="container">
<div class="form-group">
<div class="table-responsive">
<form name="budgetform" id="budgetform">
<table class="table" id="spreadsheet">
<tr id="row1">
<td id="inputtd">
<input type="text" id="descr1" name="descr[]" size="25" class="inputrow" style="font-weight:bold; background-color:Wheat">
<input type="text" id="dueday1" name="dueday[]" style="text-align: center; background-color:Ivory" size="6" class="inputrow">
<button type="button" name="add" id="add1" style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.btn_add', function() {
var button_id = $(this).attr("id");
// alert("HELLO");
// alert(button_id);
// get number part of ID
var nLen = button_id.length
var numsize = nLen - 3;
var nIdx = button_id.substr(3, 2);
var sIdx = nIdx.toString();
// alert(sIdx);
var sRowRef = "#row";
var sAddToThisRowRef = sRowRef + sIdx;
nIdx++;
sIdx = nIdx.toString();
var sRemIdx = "rem" + sIdx;
var sAddIdx = "add" + sIdx;
// var sNewRow = '<tr id="row'+nIdx+'"><td><input type="text" id="descr'+nIdx+'" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
var sNewRow = '<tr id="row' + nIdx + '"><td><input type="text" id="descr' + nIdx + '" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
sNewRow = sNewRow + '<input type="text" id="duedate' + nIdx + '" name="dueday[]" placeholder="Date Day" size = "6" class="inputrow"; background-color:Ivory" />';
sNewRow = sNewRow + '<button type="button" name="add" id=' + sAddIdx + ' style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button></tr>';
$(sAddToThisRowRef).after(sNewRow);
// $(sAddToThisRowRef).append(sNewRow);
var sJustAddedRowRef = sRowRef + sIdx;
});
});
</script>
我沒有看到繼承的cellspacing屬性。 這個讓我難過了一段時間... Thx！
2 個解決方案
解決方案1
2 2016-11-22 19:51:33
您看到的行為是因為HTML將多個空格壓縮為一個空格字符 。
HTML中<input>和<button>標記之間存在空格，因此兩個輸入字段和第一行中的按鈕之間會出現一個空格。 但是在您的JavaScript代碼中構造的HTML中沒有空格，因此后續行中的這些控件之間沒有空格。
解決方案是在代碼構造控件時在控件之間添加單個空格（ ）（請參見下面的第2和3行）：
var sNewRow = '<tr id="row' + nIdx + '"><td><input type="text" id="descr' + nIdx + '" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
sNewRow = sNewRow + ' <input type="text" id="duedate' + nIdx + '" name="dueday[]" placeholder="Date Day" size = "6" class="inputrow"; background-color:Ivory" />';
sNewRow = sNewRow + ' <button type="button" name="add" id=' + sAddIdx + ' style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button></tr>';
解決方案2
0 2016-11-22 19:44:14
在您的方案中將clone與insertAfter一起使用。 我認為它最適合您的工作。
例如：
$("#car2").clone().insertAfter("div.car_well:last");
或者您也可以嘗試以下方法：
$("div[id^='car']:last").after($('#car2').clone());
jQuery-$（this）不接受元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.