Jump to content

How To Hide Table Elements Based On Data Attribute Values


Recommended Posts

I found that I can hide table elements based on HTML5 data attribute values.

 

This solves a shortcoming of Caspio datapage configuration options:

If you have a datapage that uses Inline Insert, you will find that you must choose between allowing a field to be editable on Insert, and allowing a field to be editable on Edit.

 

In my case, I wanted to allow Inserts with a date, but once the record was there, I didn't want the date to ever change. When you enable Inline Insert, you don't have this ability, because if you disable editing the date, then one can't Insert new records with a date.

 

However, a unique HTML5 data attribute=name, value=InlineEdityourFieldName is only applied to rows opened for editing, not on the Insert row, so we can use the attribute and value combo as a css selector to target Edits and not Inserts.

 

Here I add the class "hideDateEdit" to matches for my selector, then inline a style to hide that class. Actually, I'm adding the class to the parentNode of my match, so that the contents of the whole cell are hidden, in this case, the date's text input, as well as the adjacent calendar img for the popup calendar function.

 

<SCRIPT LANGUAGE="JavaScript">
var elems = document.querySelectorAll('input[name=InlineEditDates_Date]');
for (var i=0, m=elems.length; i<m; i++) {
elems.parentNode.className = "hideDateEdit";
}
</SCRIPT>
<style type="text/css">.hideDateEdit {
display: none;
}
</style>
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...