2016-11-27 27 views
0

いくつかのボタン(彼らは動的に作成されます)ボタン属性からデータを取得する方法は?

<button class="common" id="1.1" status="sale" oncontextmenu="rightButton('1.1'); return false" onclick="addOptions('1.1')" number="1">1</button> 

私は、属性(クラス、ID、ステータス、番号)を取得し、オブジェクト配列に挿入する必要があります。次に、データベースに入力します。このコードの

function saveScheme() 
{ 
    var table = document.getElementById('schemeTable'); 
    var elements = table.getElementsByTagName('button'); 
    var arrayIdButtons = {}; 
    for(var i = 0; i<elements.length; i++) 
    { 
    arrayIdButtons[i] = {}; 
    for(var j = 0; j<4; j++) 
    { 
     arrayIdButtons[i]["coord"] = elements.item([i]).id; 
     arrayIdButtons[i]["status"] = elements.item([i]).status; 
     arrayIdButtons[i]["type"] = elements.item([i]).class; 
     arrayIdButtons[i]["number"] = elements.item([i]).number; 
    } 
    } 
    console.log(arrayIdButtons); 
    var data='data=' + JSON.stringify(arrayIdButtons,"", 2); 
    $.ajax({ 
      type: 'POST', 
      url: "handler.php", 
      data: data, 
      cache: false, 
      data: data, 
      success: function(data) { 
       alert(data) 
      } 
     }); 
} 

結果(console.log(arrayIdButtons);):

enter image description here

+0

IDに '.'を使用することはお勧めできません。 CSSセレクタを書くとき、クラス名を示すために '.'が使われるので、それをエスケープする必要があります。 – Barmar

+0

'for(var j'ループは何ですか?あなたは何にも' j'を使用していませんし、 'elements.item([i])'は 'elements [i]'でなければなりません。 – Barmar

答えて

1

既にjQueryを使用しているので、.attr()を使用して要素の属性にアクセスできます。たとえば:

$('.common').attr('number'); 

それとも、jQueryのなし、

elements[i].getAttribute('number'); 
1

使用HTML5のAPI data

<button class="common" id="1.1" data-status="sale" oncontextmenu="rightButton('1.1'); .....</button> 

ので、

elements.item([i]).data('status'); //if jquery enabled 
+0

これは ' –

+0

@StephenThomasまず、非標準属性を使用しないことがポイントです。 – Barmar

0

あなたはこのHTMLを試すことができます。その後、

<button class="common" data-id="1.1" data-status="sale" data-number="1">1</button> 

DOMがロードされていない場合は、

$(document).ready(function(){ 
$(".common").on("click",function(){ 
    var data_id = $(this).attr('data-id'); 
    var data_status = $(this).attr('data-status'); 
    var data_number = $(this).attr('data-number'); 
    console.log(data_id); 
    console.log(data_id); 
    console.log(data_id); 
}); 
}); 

ことで、これを取得することができ、DOMがすでにロードされている場合は、次にあなたがプッシュすることができ

$(document).on("click",".common",function(){ 
    var data_id = $(this).attr('data-id'); 
    var data_status = $(this).attr('data-status'); 
    var data_number = $(this).attr('data-number'); 
    console.log(data_id); 
    console.log(data_id); 
    console.log(data_id); 
}); 

でそれらを得ることができますこれは配列です。注 - これは、ボタンだけの属性がクリックされたことを示します。

関連する問題