6

jqueryを使用してHTMLテーブルのセル内に行を挿入しようとしています。次のようなものが必要です:

--------------
ID | Sec | Div
--------------
1  | S1  | D1
   | S2  | D2
   | S3  | D3
--------------
2  | S3  | D3
   | S4  | D4
   | S5  | D5
--------------

これが私がこれまでに持っているものです：

function insertRows(this){


var Rows1 = '<tr><td> S1 </td></tr><tr><td> S2 </td></tr><tr><td> S3 </td></tr>'
var Rows2 = '<tr><td> S3 </td></tr><tr><td> S4 </td></tr><tr><td> S5 </td></tr>'

this.srcElement.parentElement.nextSibling.outerHTML = Rows1
this.srcElement.parentElement.nextSibling.nextSibling.outerHTML = Rows2

}

何をするかというと、次のようにすべて同じ行に挿入します。

---------------------
ID | Sec     | Div
---------------------
1  | S1S2S3  | D1D2D3
---------------------
2  | S3S4S5  | D3D4D5
---------------------

どうすればこれを機能させることができますか?

4

3 に答える 3

10

jqueryを使用せずに、このコードをボディタグ内に貼り付けるだけで要件を満たすことができます

 <table>
 <tr>
 <td >ID</td>
 <td>SEC</td>
 <td>DIV</td>

 </tr>
 <tr>
 <td rowspan="3">1</td>
 <td>S1</td>
 <td>D1</td>

 </tr>
 <tr>

 <td>S2</td>
<td>D2</td>

</tr>
<tr>

<td>S3</td>
<td>D3</td>

</tr>
<tr><td colspan="3">---------------------</td></tr>
<tr>
<td>ID</td>
<td>SEC</td>
<td>DIV</td>

</tr>
<tr>
<td rowspan="3">2</td>
<td>S1</td>
<td>D1</td>

</tr>
<tr>

<td>S2</td>
<td>D2</td>

</tr>
<tr>

<td>S3</td>
<td>D3</td>

</tr>
</table>

ここでライブの例を見つけることができますhttp://jsfiddle.net/Anujyadav123/AdQy3/

于 2012-10-05T10:41:03.470 に答える
0

ここを見てください その場でテーブルにcolspanとrowspanを追加します

また

行を追加することは重要ですか。そうでない場合は、値をセルに追加できますか

例：

function showP(){
     txt1 = $($('#myTable').find('TR').find('TD')[1]).html()+'</br>S1'
     txt3 = $($('#myTable').find('TR').find('TD')[3]).html()+'</br>D1'

     $($('#myTable').find('TR').find('TD')[1]).html(txt1 )
     $($('#myTable').find('TR').find('TD')[3]).html(txt3 )
}
于 2012-09-24T16:22:25.760 に答える
0

.innerHTML少なくともIEの下では、テーブルを扱うときはかなり壊れています。

選択肢は次のとおりです。

  1. の使用を、要素.innerHTMLの内容のみを変更するように制限します。td
  2. .innerHTMLテーブル構造全体を置き換えるために使用します
  3. メソッドを使用DOMして、表の行と表のセルを操作します。
    https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
于 2012-09-24T16:38:34.117 に答える