0

誰かが私に手がかりを持っていることを願っています。私はJavaScriptが初めてで、動的に生成されたテーブルでこの構造を構築しようとしています。

<table>
<tr>
  <td>value1</td>
  <td>value2</td>       
  <td>value3</td>
  <td>value4</td>
</tr>
<tr>
  <td>value5</td>
  <td>value6</td>       
  <td>value7</td>
  <td>value8</td>
</tr>
<tr>
  <td>value9</td>
  <td>value10</td>      
  <td>value11</td>
  <td>value12</td>
</tr>
<tr>
  <td>value13</td>
  <td>value14</td>      
  <td>value15</td>
  <td>value16</td>
</tr>
</table>

私がやろうとしたことは、 の<tr>4 ペアごとに a をエコーすることです<td>。このような：

var tbody_el = $("#somevalue_id"); //is the id of the table, which needs to be filled with `<tr>` and `<td>`.
var counter = 0;
$.each(TonsOfData.getValues(), function(index, somevalue) {
            //var tr_el = $("<tr></tr>");
            var td_checkbox_el = $("<td></td>");
            var cbName  =   "cb_"   + somevalue.displayName + "_name";
            var cbId    =   "cb_"   + somevalue.displayName + "_id";
            var inputEl = $("<input type='checkbox' name='" + somevalue.displayName + "' id='" + cbId + "'/>");
            inputEl.data("somevalueId", somevalue.id);
            inputEl.attr("checked", "checked");
            inputEl.change(valueChoicesClick);
            var div_value_id = "div_value_" + somevalue.id + "_id";
            var div_value_el = $("<div id='" + div_value_id + "' align='left'></div>");
            var td_value = $("<td></td>");


            td_checkbox_el.append(inputEl);
            if(counter == 0 || (counter +1)%4 == 0){
                echo "<tr>";
            } 
            td_value.append(td_checkbox_el, "<br> Displayname: " + somevalue.displayName,"<br> Unit: "+ somevalue.unitstring," <br>",div_value_el);

            if((counter +1)%4 == 0) {
                echo "</tr>";
            }           
            //tbody_el.append(tr_el);
        }
        );

これは可能ですか？それとも、私は完全に間違った方向に進んでいますか？

提案をありがとうございました!!

編集： 私のために働く解決策を見つけました。誰もが同じ問題を抱えているとは思えませんが、とにかく共有したいと思います。ループでインクリメントされるカウンターを作成し、<td>パーツにクラス ID を与えました。

if(counter<4){
    td_value = $("<td class='select1'></td>");
}
if(counter>3 && counter <8){
    td_value = $("<td class='select2'></td>");
}
if(counter>7 && counter <12){
    td_value = $("<td class='select3'></td>");
}
if(counter>11 && counter <16){
    td_value = $("<td class='select4'></td>");
}
if(counter>15 && counter <20){
    td_value = $("<td class='select5'></td>");
}

その後、 JQuery 関数を使用しwrapAll()て<tr>. それはトリックをしました。

$('#somevalue_id td.select1').wrapAll('<tr/>');
$('#somevalue_id td.select2').wrapAll('<tr/>');  
$('#somevalue_id td.select3').wrapAll('<tr/>');  
$('#somevalue_id td.select4').wrapAll('<tr/>');  
$('#somevalue_id td.select5').wrapAll('<tr/>');

私は知っています、それは最もエレガントな解決策ではありませんが、うまくいきます。ヒントをくれた皆さん、ありがとうございました。これを解決するのを手伝ってくれました!

4

3 に答える 3

0

jquery と using を使用.eachして、各反復で 4 番目の要素を反復して取得し、.nth-child使用後に挿入することができます.insertAfter

于 2014-03-04T20:56:25.460 に答える
0

それに応じてテーブルを更新する例を見つけてください。これはあなたがそれを行うことができる1つの方法です

<table class="test_table" id="test_table">
</table>

var tableEl = $(".test_table");
var noOfRows = 4;
var noOfColumns = 4;
//Empty the table in case there is anything already there

tableEl.each(function(){
    var tableElObject = $(this);
    for(i=0;i<noOfRows;i++)
    {
        rowStart = "<tr>";
        for(j=0;j<noOfColumns;j++)
        {
            rowStart +="<td>"+"Test"+i+j+"</td>";
        }
        tableElObject.append(rowStart+"<tr/>");
    }

});

http://jsfiddle.net/qg5hG/

于 2014-03-04T21:08:24.117 に答える
0

テーブル trs と tds を動的に作成したい場合は、この方法が適しています....

var table = document.createElement('table');
    table.setAttribute('border','0');
    table.setAttribute('cellspacing','5');
    table.setAttribute('cellpadding','5');
    table.setAttribute('width','100%');

    var tr = table.insertRow(-1);// "-1"s meaning add tr to end of table if you want to add top of table you must use "0"
        tr.id = 'Tr1 ID';

        var td = tr.insertCell(-1);
            td.innerHTML = 'Inside of TD 1';

        var td = tr.insertCell(-1);
            td.innerHTML = 'Inside of TD 2';

    var tr = table.insertRow(-1);

        var td = tr.insertCell(-1);
            td.innerHTML = 'Inside of TD 1';

        var td = tr.insertCell(-1);
            td.innerHTML = 'Inside of TD 2';
于 2014-03-07T11:18:16.423 に答える