jquery在表格單元格中插入新元素而不擦除其他元素

Question

表格包含幾行，每行都有四個單元格。

與id=tdJane一個細胞，我已經有兩個輸入元素：

<table> 
    <tr> 
     <td id="tdBob"> 
      <input type="hidden" id="hida" value="some stuff"> 
      <input type="hidden" id="hidb" value="other stuff"> 
     <td> 
     <td id="tdJane"> 
      <input type="hidden" id="hid1" value="some text"> 
      <input type="hidden" id="hid2" value="other text"> 
     <td> 
    </tr> 
</table> 

進入細胞#tdJane，我希望插入下面#hid2

一個新的隱藏輸入字段我試過這樣：

$('#tdJane').html('<input type="hidden" id="hid3" value="newest text">') 

但重寫單元格的現有內容。

我該怎麼辦？

Answer 1

您需要使用.append(),.html()會覆蓋內容。

$('#tdJane').append('<input type="hidden" id="hid3" value="newest text">'); 

您可以使用jquery元素構造函數以獲得更清晰的效果。在此Demo

Answer 2

你的HTML

$('#tdJane').append($('<input/>',{type:'hidden', 
            id: 'hid3', 
            value:'newest text'})); 

見viewsource有問題，但你也應該使用jQuery的.append()方法。你的HTML應該更像：

<table> 
    <tr> 
    <td id='tdBob'> 
     <input type='hidden' id='hida' value='some stuff' /> 
     <input type='hidden' id='hidb' value'other stuff' /> 
    </td> 
    <td id='tdJane'> 
     <input type='hidden' id='hid1' value='some text' /> 
     <input type='hidden' id='hid2' value='other text' /> 
    </td> 
    </tr> 
</table> 

你的jQuery應該更像：

$('tdJane').append("<input type='text' id='hid3' value='newest text' />");