ボタン属性からデータを取得する方法は？

Question

いくつかのボタン（彼らは動的に作成されます）

<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);）：

Answer 1

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

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

それとも、jQueryのなし、

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

Answer 2

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

Answer 3

あなたはこの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); 
}); 

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