We Keep Coding

Making one row with colspan first row of the Wordpress options page

In my WordPress options page, for creating fields I am using Fluent Framework. It is similar to Meta Box. So both of them use do_settings_fields function and the function generates the code like this:
<table class="form-table">
<tr>
<th scope="row">Header 1</th>
<td>Element 1</td>
</tr>
<tr>
<th scope="row">Header 2</th>
<td>Element 2</td>
</tr>
<tr>
<th scope="row">Header 3</th>
<td>Element 3</td>
</tr>
<tr>
<th scope="row">Header 4</th>
<td>Element 4</td>
</tr>
</table>
It looks like this:
In this table, I want to use firs row as a one row like this:
I creted a javascript file to fields/custom_html directory and hide scope with jQuery and enqueue the javascript file like this:
jQuery(document).ready(function()
{
jQuery('th[scope="row"]').first().hide();
});
But this doesn't completely solve my problem. Because I don't mind if I only use one row, but it's very problematic for multi-rows. Maybe I need to close the table tag and open a new table tag again, but I haven't been able to do this with my limited jQuery knowledge.

Merging two columns you have to use "colspan" attributes which can helpful, Here I am sharing the code for jquery.
$(document).ready(function(){
var $table_head = jQuery('tr').first();
var value = $table_head.text();
$table_head.html('<th colspan="2">'+value+'</th>');
});

Sorting table does not work correctly

I'm using a plugin called tablesorter. I'm trying to sort a table with rowspan rows. However, it does not sort all columns correctly. Here's the jsFiddle.
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>28</td>
<td rowspan="2" style="vertical-align:middle">AAA</td>
</tr>
<tr class="expand-child">
<td>John</td>
<td>33</td>
</tr>
<tr>
<td>Clark</td>
<td>18</td>
<td>BBB</td>
</tr>
<tr>
<td>Bruce</td>
<td>22</td>
<td>CCC</td>
</tr>
</tbody>
</table>
JS
$('table').tablesorter();
The age column does not sort properly, how do I make it so that all the columns sort properly?

The problem (visually, not technically) is that you have a marked John as a child of Peter. So, only the numbers 28, 18 and 22 are considered for sorting. 33 is never considered for sorting at all.
Changing the first two rows as follows seems to solve the problem
<tr>
<td>Peter</td>
<td>28</td>
<td>AAA</td>
</tr>
<tr>
<td>John</td>
<td>33</td>
</tr>
From the looks of your HTML and your sorting requirement, doesn't look like you need the rowspan or the expand-child class. Maybe you confused rowspan with having same values for 2 rows?

do you want initial sorting?
sort by age
$('table').tablesorter({sortList: [[1,0]]});
sort by first name and age
$('table').tablesorter({sortList: [[0,0], [1,0]]});

Datatables for mutiple tables on one page having different td count each

applying datatable on each table using id but it only triggers for one table and give error in console.
"Uncaught TypeError: Cannot set property 'nTf' of undefined" while i need to display it on every table .
Using class cannot be applied because each table has different td's count .
for instance i have two tables with id's table1 & table2 and calling datatable as
$('#table1').DataTable();
$('#table2').DataTable();
Please advise any help would be appreciated
my first table is
<table id="table1">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>project</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test project</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3"></th>
</tr>
</tfoot>
</table>
My second table is
<table id="table2">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>Task</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test task</td>
<td>Edit</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4"></th>
</tr>
</tfoot>
</table>

Using class cannot be applied because each table has different td's count
There is nothing to do when we use datatable for mutiple tables it works only for the tables which have same count of td's and can be applied using the both table's same class
Live Demo

i just had this problem and it turned out to be one too many tds in the tfoot. Check your rows and columns for extras, unclosed tags etc.

How to get the cfdiv to display under each line?

I have a table of records and the user can click on a name to show more detailed information about that certain record. I have it set up with a tag but each time the link is clicked it only shows up on the top of the page or the very first row. Is there a way to get it to show under each name when it is click. Here is the code I have...
<table width="75%" border="1">
<tr>
<th>Student Name</th>
</tr>
<cfoutput query="Q">
<tr>
<td>#Q.sln#, #Q.sfn#</td>
</tr>
<tr>
<td><cfdiv id="detail"></cfdiv></td>
</tr>
</cfoutput>
</table>

Since you are in a loop <cfoutput query="Q"> you will need to make detail a unique identifier. As you have it written every iteration of your loop has the same id. Maybe just add the current row number to make it unique.
<table width="75%" border="1">
<tr>
<th>Student Name</th>
</tr>
<cfoutput query="Q">
<tr>
<td>#Q.sln#, #Q.sfn#</td>
</tr>
<tr>
<td><cfdiv id="detail#Q.CurrentRow#"></cfdiv></td>
</tr>
</cfoutput>
</table>

Click on element to filter column in javascript (datatables)

I am using javascript DataTables to display data, and would like to modify filters by clicking on data items as well as the standard menus. For example, I have a table like this (obviously not including the javascript functions necessary to filter):
<table>
<thead>
<th>name</th>
<th>number</th>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>2</td>
</tr>
<tr>
<td>Bob</td>
<td>1</td>
</tr>
<tr>
<td>Frank</td>
<td>5</td>
</tr>
</tbody>
</table>
If the viewer clicks on 'Bob', I want the filter to be updated to only display rows containing 'Bob'.

Use ColumnFilterWidgets or ColumnFilter.
There are examples, snippets and docs in those pages. I hope it helps.