0

javascript を使用してテーブル行を動的に生成しています (jquery は関係ありません)。各行には、3 つのセル ゾーン番号、入力、および削除ボタンがあります。追加される行数は、選択ボックスを使用して 3 を選択すると、3 行が追加されます。私がしたいのは、3 行を追加してから別の 3 行を追加した場合です。行は 1,2,3,4,5,6 として表示され、現在は 1,2,3,1,2,3 です。また、行が削除されたときに行を並べ替える方法についても説明します。

現在のコード php ファイル:

   function display_Zones($focus, $field, $value, $view){

    global $locale, $app_list_strings, $mod_strings;

    $html = '';

    if($view == 'EditView'){

        $html .= '<script src="modules/dry_Zones/zone_items.js"></script>';
        $html .= "<div style='padding-top: 10px; padding-bottom:10px;'>";
        $html .= "<select id='zone' name='zone'>";
        $html .= get_select_options_with_id($app_list_strings["zone_list"]);
        $html .= "</select> ";

        $html .= "<input type=\"button\" tabindex=\"116\" class=\"button\" value=\"addZone\" id=\"addZone\" onclick=\"insertZone()\" />";
        $html .= "</div>";

        $html .= "<table border='0' cellspacing='4' width='40%' id='zoneItems'>";
        $html .= "<tr><td></td><td>Motor Reference Point</td><td></td></tr>";

        $html .= "</table>";



        return $html;
    }

JavaScript ファイル:

 var num = 1;

 function insertZone() {

var table = document.getElementById('zoneItems');

var e = document.getElementById('zone');
var number = e.options[e.selectedIndex].value;

if(number != ''){


    for (var i=0; i < number; i++)
    {
        var x = table.insertRow(-1);
        var a = x.insertCell(0);
        num = num+i;

        a.innerHTML = "<span>Zone: "+num+"</span> ";

        var b = x.insertCell(1);
        b.innerHTML = "<input type='text' name='motor_ref_point' size='18' value='' />";

        var c = x.insertCell(2);
        c.innerHTML = "<button class='button lastChild' onclick='removeZone(this)' ><img src='themes/default/images/id-ff-clear.png'></button>";
    }


}

}

  function removeZone(rows) {

  var _row = rows.parentElement.parentElement;
  document.getElementById('zoneItems').deleteRow(_row.rowIndex);



   }
4

2 に答える 2

1

おそらく最も効率的な方法ではありませんが、何千もの行がない限り、問題に気付くことはないと思います。行を追加/削除するときは、各行の最初のテーブルセルを繰り返し処理し、インデックスに基づいて更新することができます。

Array.prototype.forEach.call(document.querySelectorAll('td:first-child'),
function (elem, idx) {
    elem.innerHTML = idx + 1;
});

http://jsfiddle.net/ExplosionPIlls/2QxX6/

于 2013-02-19T11:55:05.253 に答える
0

このようにするだけで終わった：

function insertZone() {

var table = document.getElementById('zoneItems');

var e = document.getElementById('zone');
var number = e.options[e.selectedIndex].value;

if(number != ''){


    for (var i=0; i < number; i++)
    {
        var x = table.insertRow(-1);
        var a = x.insertCell(0);
        num = i+1;

       // a.innerHTML = "<span>Zone: "+num+"</span> ";

        var b = x.insertCell(1);
        b.innerHTML = "<input type='text' name='motor_ref_point' size='18' value='' />";

        var c = x.insertCell(2);
        c.innerHTML = "<button class='button lastChild' onclick='removeZone(this)' ><img src='themes/default/images/id-ff-clear.png'></button>";
    }

    count();
}

}

  function removeZone(rows) {

var _row = rows.parentElement.parentElement;
document.getElementById('zoneItems').deleteRow(_row.rowIndex);

count();
}

function count(){

var table = document.getElementById("zoneItems");
var tbody = table.tBodies[0];
row_count = tbody.rows.length - 1;

for (var i = 0, row; row = tbody.rows[i]; i++) {

    if(i != 0){

        for (var j = 0, col; col = row.cells[j]; j++) {

            if(j == 0){
                col.innerHTML = "<span>Zone: "+i+"</span> ";
            }
        }
    }

}

}
于 2013-02-19T12:24:50.110 に答える