<script type="text/javascript">
function toggle(clazz)
{
var count = 0;
var hide = false;
dojo.query("."+clazz).forEach(function(node) {
console.log(node);
if (node.style.display == "inline-block") {
node.style.display = "none";
document.getElementById("toggleBtn").innerHTML = "+";
hide = true;
} else {
node.style.display = "inline-block";
document.getElementById("toggleBtn").innerHTML = "-";
}
count++;
});
if (hide) {
document.getElementById("plus").colSpan = "" + (parseInt(document.getElementById("plus").colSpan) - count);
} else {
document.getElementById("plus").colSpan = "" + (parseInt(document.getElementById("plus").colSpan) + count);
}
}
</script>
<table border="1">
<thead>
<tr>
<td> </td>
<td id="plus" colspan="4"><span id="toggleBtn" style="cursor: pointer" onclick="toggle('hideBlock')">-</span></td>
</tr>
<tr>
<td>First col</td>
<td class="hideBlock">Sec col</td>
<td class="hideBlock">third col</td>
<td class="hideBlock">forth col</td>
<td>fifth col</td>
</tr>
</thead>
<tr>
<td>First col</td>
<td class="hideBlock">Sec col</td>
<td class="hideBlock">third col</td>
<td class="hideBlock">forth col</td>
<td>fifth col</td>
</tr>
<tr>
<td>First col</td>
<td class="hideBlock">Sec col</td>
<td class="hideBlock">third col</td>
<td class="hideBlock">forth col</td>
<td>fifth col</td>
</tr>
</table>
Archiv für den Monat: February 2012
Javascript – Table filtering
<script type="text/javascript">
function search(clazz, elem) { var searchValue = elem.value.toLowerCase(); dojo.query("#myData ."+clazz).forEach(function(node) { console.log(elem.value); if (elem.value == "") { var tr = node.parentNode; tr.style.display = "table-row"; } else if (node.innerHTML.toLowerCase().indexOf(searchValue) > -1) {
var tr = node.parentNode;
tr.style.display = "table-row";
} else {
var tr =node.parentNode;
tr.style.display = "none";
}
});
}
</script><table id="myData">
<thead>
<tr>
<th>isbn</th>
<th>title<br/><input type="text" onkeyup="search('name', this)"/></th>
<th>author<br/><input type="text" onkeyup="search('nummer', this)"/></th>
<th>title2</th>
<th>author2</th>
</tr>
</thead>
<tbody>
<tr>
<td>First col</td>
<td class="name readonly">Sec col</td>
<td class="nummer readonly">third col</td>
<td class="hideBlock">forth col</td>
<td>fifth col</td>
</tr>
<tr>
<td>First col</td>
<td class="name readonly">row2 col</td>
<td class="nummer readonly">row2 col</td>
<td class="hideBlock">forth col</td>
<td>fifth col</td>
</tr>
</tbody>
</table>