JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<table id="table1" ric:attrib="test">
        <tbody>
                <tr><td>Data 1</td></tr>
       </tbody>
</table>
<table id="table2">
       <tbody>
               <tr><td>Data 1</td></tr>
       </tbody>
</table>
<div id="div1" ric:attrib="test">
        div 1 content
</div>
<div id="div2">
       div 2 content
</div>

CSS

body, td {
      font-family: sans-serif;
       font-size: 11px;
}
td {
       white-space: nowrap;
       padding: 1px;
       border: 1px solid #CDCDCD;
}
span {
    display:block;
    border:1px solid #000;
    padding:5px;
    margin:5px;
}

JavaScript

// #1591: Invalid argument for attributes with colons that are not present on a table element

var $table1 = $('#table1'),
    $table2 = $('#table2'),
    $div1 = $('#div1'),
    $div2 = $('#div2');

// Invalid argument
try {
    console.log(" %o attr (undefined): ", $table2, $table2.attr('ric:attrib') );
} catch(e) {
    console.log(" %o attr (undefined): error: %o, message: %s", $table2, e, e.message);
}

// Invalid argument
try {
    console.log(" %o getAttribute (null): %s", $table2, $table2[0].getAttribute("ric:attrib"));
} catch(e) {
    console.log(" %o getAttribute (null): error: %o, message: %s", $table2, e, e.message);
}

// Non-existent attribute on table without colon
console.log(" %o non-existant without colon attr(undefined): ", $table2, $table2.attr('ricattrib') );

// Non-existent attribute with colon on a div
console.log(" %o non-existant with colon attr(undefined): ", $div2, $div2.attr('ric:attrib') );

// Above using getAttribute
console.log(" %o getAttribute (null): %s", $div2, $div2[0].getAttribute("ric:attrib"));

// Possible solution: getAttributeNode
console.log(" %o getAttributeNode (null): %s", $table2, $table2[0].getAttributeNode('ric:attrib'));