javascript - Custom HTML attributes with dynamic values - Stack Overflow

admin管理员组

文章数量:1431406

I'm working on a project based on schools and one of the features we have is school finder.

Because schools like to continue using Windows XP and stuck with Internet Explorer 1 (pun intended), I'm trying to use tradition javascript, rather than jQuery to support all browsers.

The problem is, the schools listed from the database are put into tables, each having a custom attribute called data-school-id with a value of sch-X

I am truly stuck on how to get javascript to read these values when the user clicks on the school's table cell. This is the code I currently have:

var schID = document.getElementById("data-school-id");
schID.addEventListener("click", function() {
    alert(schID.value);
}, false);

I need to grab the numeric value, though I already know how to do that. It's getting javascript to understand the dynamic attributes and it's value for each table cell that I'm stuck on.

Each of the table cells are as so:

<td data-school-id="sch-123">
    <div class="pull-left sch-logo">
        <img src="#" width="100" height="100">
    </div>
    <div class="pull-left">
        <h3>School Name</h3>
        <p><strong>Headteacher:</strong> Mr. Foo Bar</p>
    </div>
</td>

I'm working on a project based on schools and one of the features we have is school finder.

Because schools like to continue using Windows XP and stuck with Internet Explorer 1 (pun intended), I'm trying to use tradition javascript, rather than jQuery to support all browsers.

The problem is, the schools listed from the database are put into tables, each having a custom attribute called data-school-id with a value of sch-X

I am truly stuck on how to get javascript to read these values when the user clicks on the school's table cell. This is the code I currently have:

var schID = document.getElementById("data-school-id");
schID.addEventListener("click", function() {
    alert(schID.value);
}, false);

I need to grab the numeric value, though I already know how to do that. It's getting javascript to understand the dynamic attributes and it's value for each table cell that I'm stuck on.

Each of the table cells are as so:

<td data-school-id="sch-123">
    <div class="pull-left sch-logo">
        <img src="#" width="100" height="100">
    </div>
    <div class="pull-left">
        <h3>School Name</h3>
        <p><strong>Headteacher:</strong> Mr. Foo Bar</p>
    </div>
</td>

• javascript

Share Improve this question Follow edited Aug 22, 2013 at 13:57 TechKat asked Aug 22, 2013 at 13:41 TechKatTechKat 30733 gold badges77 silver badges1414 bronze badges 11

• 1 You might look at sizzle.js. getElementById() only works when the value is in the id attribute itself. – Jared Farrish Commented Aug 22, 2013 at 13:44
• 2 "Because schools like to continue using Windows XP and stuck with Internet Explorer 1 (pun intended), I'm trying to use tradition javascript, rather than jQuery to support all browsers." Wouldn't jQuery be a better option than trying to take care of all the browser inpatibilities yourself? – Felix Kling Commented Aug 22, 2013 at 13:45
• Felix, I work in a school and half the puters here are still using Windows XP and Internet Explorer 8. We've tried jQuery on some of them and they just don't work right. – TechKat Commented Aug 22, 2013 at 13:47
• You have to use @FelixKling to message someone specifically unless it's the OP or the answerer. IE8 and jQuery are pletely patible; you're not doing something right otherwise. – Jared Farrish Commented Aug 22, 2013 at 13:50
• 1 I agree, JQuery provides support that goes back as far as IE 7. – Craig Commented Aug 22, 2013 at 13:52

 |  Show 6 more ments

5 Answers 5

Sorted by: Reset to default 1

Access it using the getAttribute method:

schID.getAttribute("data-school-id");

Update:

To convert it to a numeric value, wrap it like so:

var id = schID.getAttribute("data-school-id"),
    n = parseInt(id, 10);

I think you are also going to have trouble with your element lookup. Are you sure the table cells are created as so:

<td>
    <div id="data-school-id" data-school-id="123"/>
</td>

Why not inspect the HTML of the table and provide a little more in your question?

Update 2:

You need to add a click handler to the table and handle events that bubble up from TD elements. Use the event.target or event.source (check IE 8 documentation for those attributes). That will give you the reference to the element:

function handler(evt) {
    evt = evt || window.event;

    var td = evt.targetElement,
        schoolId = td.getAttribute("data-school-id"),
        numSchoolId = parseInt(schoolId, 10);
}

I would strongly remend you revisit the idea of using JQuery, just be sure to use the older versions that support IE 6 (before 2.0) -- If the IE version is older than 6.0 tell them politely that they must update their browser if they say no -- you are working in a dysfunctional environment, find a new job. Not even Microsoft will support IE6 past April 8 2014 -- XP will be no more as far as they are concerned.

I have supported quite a bit a IE6 code using JQuery and it worked great. Your issues may be the lousy CSS support in IE6, or other inpatibilities, but they are unlikely to be JQuery themselves in my experience. You will have a codebase that is even more trapped in IE land if you continue down this path.

function getElementWithAttribute(attribute)
{
  var allElements = document.getElementsByTagName('*');
  for (var i = 0; i < allElements.length; i++)
  {
    if (allElements[i].getAttribute(attribute))
    {
      return allElements[i];
    }
  }
  return null;
}

var el = getElementWithAttribute('data-school-id');

if(el != null){
    el.addEventListener("click", function() {
        alert(el.value);
     }
}

Add a class reserved for the elements with data-school-id attribute. "school-elem" for example.

Use:

var schElems, i;

schElems = document.getElementsByClassName("school-elem");

for (i = 0; i < schElems.length; ++i) {
    alert(schElems[i].getAttribute('data-school-id'));
}

If you're unable to add a class (or use getElementsByClassName):

var schElems, i;

function getElementsByAttr(attr) {
    var allElems, attrElems, i;
    allElems = document.getElementsByTagName('*');
    attrElems = [];
    for (i = 0; i < allElems.length; ++i) {
        if (allElems[i].hasAttribute(attr)) attrElems.push(allElems[i]);
    }
    return attrElems;
}

schElems = getElementsByAttr('data-school-id');

for (i = 0; i < schElems.length; ++i) {
    alert(schElems[i].getAttribute('data-school-id'));
}

1) If you don't want to use jQuery you have to write a function which finds a DOM elm by data-attribute ( there're a lot of answers in Stack Overflow - ex Get elements by attribute when querySelectorAll is not available without using libraries? ). This part of code:

function getAllElementsWithAttribute(attribute)
{
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0; i < allElements.length; i++)
  {
    if (allElements[i].getAttribute(attribute)){
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

2) You have to add even listener 'cross browser'. Because IE6-8 doesn't know method - addEventListener it knows attachEvent. This part of code:

function addEvent(elem, type, handler){
    if (elem.addEventListener){
       elem.addEventListener(type, handler, false)
    } else {
       elem.attachEvent("on"+type, handler)
    }
}

3) After that you can write smth like that:

var el = getAllElementsWithAttribute('data-school-id')[0],
    elClick = function(){ alert('1') };

addEvent(el, 'click', elClick);

4) If you want to know the property of data-attribute you can do that:

 var attr = el.getAttribute('data-school-id'); // "sch-123"

getAttribute works good in IE8 http://msdn.microsoft./en-us/library/ie/ms536429(v=vs.85).aspx

本文标签： javascriptCustom HTML attributes with dynamic valuesStack Overflow