3

A table contains several rows, each with four cells.

In a cell with id=tdJane, I already have two input elements:

<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>

Into cell #tdJane, I wish to insert a new hidden input field below #hid2

I tried this: 

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

but that overwrites the existing contents of the cell.

How can I do it?

4

2 に答える 2

12

.append()を使用する必要があり.html()、内容が上書きされます。

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

より明確にするために、jquery要素コンストラクターを使用できます。

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

このデモでビューソースを見る

于 2013-07-08T21:48:47.673 に答える
0

HTML に問題がありますが、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' />");
于 2013-07-08T22:01:32.757 に答える