如何从按钮属性获取数据？

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

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

由于您已经在使用jQuery，因此可以使用.attr()访问元素的属性。例如：

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

或者，没有jQuery，

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

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);
});

然后你可以推这是一个数组。注意 - 这将为您提供仅单击按钮的属性