I want to load the table dynamically as soon as the page loads.i have tried the following code , but it is not showing 2nd column values found out in javascript.plz help me out.
<html>
<head>
<script type="text\javascript">
var brw=navigator.appCodeName;
var bw=navigator.appName;
var vrs=navigator.appVersion;
var plt=navigator.platform;
document.getElementById('r1').innerHTML = ' '+brw;
document.getElementById('r2').innerHTML = ' '+bw;
document.getElementById('r3').innerHTML = ' '+vrs;
document.getElementById('r4').innerHTML = ' '+plt;
</script>
</head>
<body>
<table border='1'>
<tr><td>Browser code </td><td><div id='r1'></div></td></tr>
<tr><td>Browser </td><td><div id='r2'></div></td></tr>
<tr><td>Browser Version </td><td><div id='r3'></div></td></tr>
<tr><td>Platform </td><td><div id='r4'></div></td></tr>
</table>
</body>
</html>
Your table should be like :
<table>
<thead>
<tr>
<th>Browser code</th>
<th>Browser</th>
<th>Browser version</th>
<th>Platform</th>
</tr>
</thead>
<tbody>
<tr>
<td><div id='r1'></div></td>
<td><div id='r2'></div></td>
<td><div id='r3'></div></td>
<td><div id='r4'></div></td>
</tr>
</tbody>
</table>
This way your table heads are set at top in <thead> balise, then you can add rows in <tbody> balise.
Just put your Javascript code at the end of your page.
Related
I've been trying to get this to load into google spreadsheet, but no success so far:
http://www.aastocks.com/tc/stocks/analysis/company-fundamental/basic-information?symbol=00027
The, I have the formula as follows:
=importxml ("http://www.aastocks.com/tc/stocks/analysis/company-fundamental/basic-information?symbol=" & To_Text(A7),"//td[#id='sb2-last']/label[#id='SQ_Last']/following-sibling::label/text()")
Result:
The content imported is empty.
The html part:
<table>
<tbody>
<tr>
<td>現價<label id="SQ_Currency">(港元)</label></td>
<td id="sb2-last">
<label id="SQ_Last" class="cls">**57.500**</label>
</td>
</tr>
</tbody>
</table>
try:
=INDEX(IMPORTXML(
"http://www.aastocks.com/tc/stocks/analysis/company-fundamental/basic-information?symbol="&
TO_TEXT(A7), "//td[#class='mcFont cls']"), 26)
Using bootstrap table; the code below returns an empty getElementById for topic_name value, but if I move the 'input' outside of the thead it works. What is happening and how do I get this to work within thead?
<table id="table" class="table table-striped">
<thead>
<tr>
<th data-field="topic">
<input type="text" name="topic_name" id="topic_name">
<a onclick="topicButton()" href="##">this</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>some info here...</td>
</tr>
</tbody>
</table>
<script>
function topicButton()
{
var getThis=document.getElementById("topic_name").value;
alert(getThis);
}
</script>
Tested 2 examples and removed some bootstrap table parameters, removing one parameter worked in 1 example and removing another worked in the other.
For the code I submitted above (after I added all the additional bootstrap table parameters that my original code included - see list below), I removed data-toggle="table" and it worked. In my original code i remove data-show-columns="true" and it worked... odd.
Here is a list of the parameters I had attached to bootstrap table:
<table id="table" class="table table-striped table-borderless"
data-toolbar="#toolbar"
data-toggle="table"
data-cookie="true"
data-cookie-id-table="topic_id"
data-pagination="true"
data-search="true"
data-sort-name="topic_id"
data-sort-order="desc"
data-unique-id="topic_id"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-show-search-button="true"
data-page-size="5"
data-page-list="[5, 10, 25, 50, 100, all]"
data-select-item-name="selectItemName"
data-show-export="true">
I'm adding dataTable to my coldFusion project, but it is returning: Uncaught TypeError: f is undefined
Code:
<table id="webPosttable" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>DATE</th>
<th>CK</th>
<th>NAME</th>
<th>IN</th>
<th>RATE</th>
<th>COST</th>
</tr>
</thead>
<tbody>
<cfoutput query="myQuery">
<cfset totalreportin = totalreportin + val(counter)>
<cfset totalreportcost = rate*counter + totalreportcost>
<tr>
<TD>#inserteddate#</TD>
<TD>#ck#</TD>
<TD>#fullname#</td>
<TD>#counter#</TD>
<td>#decimalformat(rate)#</td>
<td>#dollarformat(rate*counter)#</td>
</tr>
</cfoutput>
</tbody>
<tfoot>
<cfoutput>
<tr>
<TD colspan="3">TOTAL:</TD><td>#totalreportin#</td><TD></td><td>#dollarformat(totalreportcost)#</td>
<TD colspan="3">AVERAGE:</TD><td><Cfif incomingreport.recordcount GT 0>#decimalformat(val(totalreportin/incomingreport.recordcount))#<Cfelse>0</CFIF></td>
</tr>
<tr>
<td></td><td><Cfif totalreportin GT 0>#dollarformat(totalreportcost/totalreportin)#<cfelse>0</cfif></td>
</tr>
</cfoutput>
</tfoot>
</table>
<script>
$('#webPosttable').DataTable({
"lengthChange": false,
"paging": false,
"bInfo" : false,
"dom": '<"pull-left"f><"pull-right"l>tip'
});
</script>
Does anyone know what if something is missing in my table structure or javascript datable settings?
Thanks
The problem won't be in your Coldfusion code, it will be the structure of your <tfoot> content. The number of columns in the tfoot doesn't match the number of columns in the rest of your table. Even the two trs within your tfoot don't match each other.
Comment out the tfoot temporarily to test whether it works without, then balance up the columns and put it back in.
eg:
<tfoot>
<cfoutput>
<tr>
<TD>TOTAL:</TD>
<td>#totalreportin#</td>
<td></td>
<td>#dollarformat(totalreportcost)#</td>
<TD>AVERAGE:</TD>
<td><Cfif incomingreport.recordcount GT 0>#decimalformat(val(totalreportin/incomingreport.recordcount))#<Cfelse>0</CFIF></td>
</tr>
<tr>
<td colspan="5"></td>
<td><Cfif totalreportin GT 0>#dollarformat(totalreportcost/totalreportin)#<cfelse>0</cfif></td>
</tr>
</cfoutput>
</tfoot>
If you still have errors after that then I'd advise updating the question to include the code showing which version of jQuery+datatables you're including and where and how you're including it. You may also need to wrap your script in a $(document).ready( function () { ...
I have a table like this
<table>
<thead>
<tr>
<th>Name</th>
<th>Department</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr id="data1">
</tr>
<tr>
</tr>
</tbody>
And I want to use Html Agility Pack to parse its specific row i.e i want to display row next to row which has id=data1
below is code I am trying ...
//Selecting Document Node....
HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(data);
//Selecting Specific Node...
var tableNodes = doc.DocumentNode.SelectNodes("//table");
Your xpath should be like this:
//table/tbody/tr[#id='data1']/following-sibling::tr
I have make table scrollable inside div and everything is working fine but table header is too scrolling.I want to make table header fixed. And this table is rendered within a div. I have used PahingHelper model for paging.I have tried to use scrollable in table but it too is not working.So, am here to make scrollable-table. Is there any way to make table scrollable?
// here is my sample code for scrolling
#model ShresthaTrade.Helper.PagingHelper
<table >
<tr>
<th>Brand</th>
<th>Machine Type</th>
<th>Machine Model</th>
<th>Machine Serial</th>
<th>Mac Address</th>
</tr>
</table>
<div style=" overflow:auto; height: 340px;">
<table >
<tbody>
#if (Model.Datatable.Rows.Count > 0)
{
foreach (System.Data.DataRow row in Model.Datatable.Rows)
{
<tr>
<td>#row["brand_name"]</td>
<td>#row["machine_type_name"]</td>
<td>#row["MachineModel"]</td>
<td>#row["MachineSerial"]</td>
<td>#row["MacAddress"]</td>
</tr>
}
}
else
{
<tr>
<td colspan="4">No records are found</td>
</tr>
}
</tbody>
</table>
</div>