Comments (3)
gazpachoking
commented on September 28, 2024
2
I think you just need to take your code out of that function. me() only works when top level inside a <script> block. Also, while me('input') will work in your case, be aware that it is no longer scoped to just be inside your <table>, which might be an issue if your page grows.
from surreal.
figuerom16
commented on September 28, 2024
I had a feeling that was the case. I'll switch back to plain JS for this piece as I was planning on stuffing surreal into the individual elements instead for editing which honestly makes more sense and less messy.
Thank you for your time.
from surreal.
figuerom16
commented on September 28, 2024
I did finally figure out how to get it working the surreal way by using the table itself as the source of truth and properly using me(). This will work nicely with templates and allow me to easily expand it functionality.
Thanks again for the help!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/gh/gnat/surreal/surreal.js"></script>
<script>
function sort_table(rows, column, arrow) {
let switching = true, m = 0
if (arrow === '▼') m = 1
while (switching) {
switching = false
for (let i = 1; i < (rows.length - 1); i++) {
if (rows[i + m].getElementsByTagName("td")[column].innerHTML
.localeCompare(rows[i + 1 - m].getElementsByTagName("td")[column].innerHTML, undefined, { numeric: true }) > 0) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i])
switching = true
break
}
}
}
}
</script>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
input {
margin: 1rem;
}
</style>
</head>
<body>
<h2>Table</h2>
<button hx-get="/row" hx-target="#test" hx-swap="beforeend">ADD ROW</button>
SEARCH: <input type="text" />
<script>
me().on('keyup', ev=>{
let rows = Array.from(me('#test').rows)
rows.shift()
const term = me(ev).value.toLowerCase()
rows.forEach((row,i)=>{
const found = Array.from(row.cells).some(cell=>cell.innerText.toLowerCase().includes(term))
row.style.display = found ? '' : 'none'
})
})
</script>
<table id="test">
<tr>
<th>Firstname ►
<script>
me().on('click', ev=>{
const arrow = me(ev).innerText.substr(-1)
any('#test th').run(x=>{x.innerText=x.innerText.slice(0, -1) + '►'})
if (arrow === '▼') me(ev).innerText = me(ev).innerText.slice(0, -1) + '▲'
else me(ev).innerText = me(ev).innerText.slice(0, -1) + '▼'
sort_table(me("#test").rows, 0, arrow)
})
</script>
</th>
<th>Lastname ►
<script>
me().on('click', ev=>{
const arrow = me(ev).innerText.substr(-1)
any('#test th').run(x=>{x.innerText=x.innerText.slice(0, -1) + '►'})
if (arrow === '▼') me(ev).innerText = me(ev).innerText.slice(0, -1) + '▲'
else me(ev).innerText = me(ev).innerText.slice(0, -1) + '▼'
sort_table(me("#test").rows, 1, arrow)
})
</script>
</th>
<th>Age ►
<script>
me().on('click', ev=>{
const arrow = me(ev).innerText.substr(-1)
any('#test th').run(x=>{x.innerText=x.innerText.slice(0, -1) + '►'})
if (arrow === '▼') me(ev).innerText = me(ev).innerText.slice(0, -1) + '▲'
else me(ev).innerText = me(ev).innerText.slice(0, -1) + '▼'
sort_table(me("#test").rows, 2, arrow)
})
</script>
</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Dork</td>
<td>Lee</td>
<td>32</td>
</tr>
<tr>
<td>Fork</td>
<td>Bee</td>
<td>69</td>
</tr>
</table>
</body>
</html>
from surreal.
Related Issues (19)
- Can this mod be made into a sugar? HOT 5
- Payload for custom event HOT 4
- fadeIn / fade_in effect as convenience built-in.
- 1.1.6 new trigger alias for send seems to be broken HOT 1
- Warning cannot be surpressed due to incorrect parameter order HOT 5
- Comparison using the "===" operator here is always false HOT 1
- Signal value update overwrites css-scope-inline style block of html
- QUESTION: How to do keydown event on a btn? HOT 1
- me(event) behavior with children HOT 1
- ReferenceError: restricted is not defined HOT 1
- no license HOT 2
- CDN issue HOT 1
- map get
- Tree Traversal? HOT 2
- support scripts using module HOT 1
- Missing changelog HOT 1
- Releases to NPM HOT 2
- usage with astro HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from surreal.