jQuery的.append（）<tr>和附加的外<tr>

我使用的輸入聚集在一個形式的信息，然後將其建設成爲一個表動態其中兩個例子中做的很好，但是當我添加了一個刪除按鈕，我注意到<td>的第一個例子在<tr>之外。我相信那是因爲汽車關閉了，但是如果我將它添加到第二個附加中，所以它顯示爲「」......它將第一個td放在它自己的行上，其餘的放在新行中。jQuery的.append（）<tr>和附加的外<tr>

任何想法我做錯了什麼，我怎麼能解決它。把它全部放在一條長線上，但我不喜歡我的代碼看起來有多混亂。

var $tbodyAppend = $('table > tbody:last-child'); 
 
// this puts the <td>'s outside the tr, but looks correct on the page 
 
$tbodyAppend.append("<tr>"); 
 
$tbodyAppend.append("<td><span></span></td>"); 
 
$tbodyAppend.append("<td><span></span></td>"); 
 
$tbodyAppend.append("<td><span></span></td>"); 
 

 
// this puts the <td>'s in the <tr> 
 
$tbodyAppend.append("<tr><td><span></span></td><td><span></span></td><td><span></span></td>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th><span>column 1</span></th> 
 
    <th><span>column 2</span></th> 
 
    <th><span>column 3</span></th> 
 
    </tr> 
 
    <tbody> 
 
    <!-- want jQuery to append here --> 
 
    </tbody> 
 
</table>

來源

2017-09-04 Hunter

他們之外，因爲你把他們外面。不關閉<tr>並不意味着您沒有附加整個tr元素。

而是使用模板文字附加單個字符串。

var $tbodyAppend = $("table > tbody:last-child").append(` 
    <tr> 
    <td><span> ${variableHere} </span></td> 
    <td><span></span></td> 
    <td><span></span></td> 
    <tr><td><span></span></td><td><span></span></td><td><span></span></td> 
`);

這不僅允許多行字符串，但它也將讓你使用字符串插值如果需要插入任何表達式的值到字符串。

來源

2017-09-04 19:46:31 spanky

我從插入輸入字段變量分爲variableHere。我一直使用+來連接所有。插入變量時也能工作嗎？對不起，我應該說清楚。 – Hunter

@Hunter：字符串插值語法將處理它。我將在代碼中添加一個示例。 – spanky

當我試圖得到一個未捕獲的SyntaxError無效或意外的令牌。 jshint說未終止的字符串文字和JSX表達式必須有一個父元素。我確信我做錯了事，如果你有任何建議，我會很感激。感謝您的幫助！ – Hunter

附加時指的是錯誤的DOM元素。試試這種方式。

var $tbodyAppend = $('tbody'); 
$tbodyAppend.append("<tr><td><span></span></td><td><span></span></td><td<span</span></td></tr>");

來源

2017-09-04 19:59:07 sam

jQuery的.append（）<tr>和​​附加的​​外<tr>

回答

相關問題

jQuery的.append（）<tr>和附加的外<tr>