Select all but one column of HTML table - html

I'm using the following to select a table element in my application for users to drag/drop a table into Excel:
$('#footer').on("click", "#exportSel", function () {
var el = document.getElementById(curTable);
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
if (sel.removeAllRanges) {
sel.removeAllRanges();
} else if (sel.empty) {
sel.empty();
}
}
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
});
...and everything is working fine. Except one of my tables has images in a column, and I would like remove this column (or td's in that column) from the selection.
I added the "Picture" td's to a "nosel" class, and was able to put all td's in the table not in that class into a variable:
cells = $("#" + curTable + " tr td:not(.nosel)");
I then omitted the code to remove or empty the current selection, and tried adding each cell to the selection:
range.selectNode(cells[i]);
sel.addRange(range);
... but only the first td is being selected.
So two questions:
Is this even possible?
Is there a better method to use than addRange? I tried extend but that did not work.
As requested, here is an example of my table:
<table class="sortable" id="resultsTable" border="1">
<thead id="resultsHeader">
<th>OID</th>
<th>Image</th>
<th>Address</th>
<th>Parcel ID</th>
</thead>
<tbody id="resultsBody" data-ssimplename="results">
<tr>
<td>1</td>
<td align="center" class="nosel"><img style="width: 125px;" src="http://www.vanderburghassessor.org/assessor_images/12/180/34/213/020/12-180-34-213-020-S.jpg"></td>
<td align="center">5830 N KERTH AVE</td>
<td align="center">82-06-04-034-213.020-020</td>
</tr>
</tbody>
</table>

You can use the .not() function from jQuery.
$('myElements').not('myExcludedElements');
UPDATE:
JSFiddle would not load up for me for some reason so here it is in CodePen instead.
Example

I have decided to go about this another way.
Instead of removing the Image column from the selection, I am going to convert the images to the URL string when they make the selection:
`
for (i = 0; i < imgs.length; i++) {
var urlT = $(imgs[i]).attr('src');
$(imgs[i]).hide();
$(imgs[i]).parent().text(urlT);
}
`
This way the URL still exists to the image if in fact someone wants it.
The only issue is trying to restore the image once the selection is cleared. I tried adding an .on() function but it doesn't want to work correctly:
`
$('body').on('click', function () {
if ($("#" + curTable + " img:hidden").length > 0) {
var imgs = $('#' + curTable + " img:hidden");
for (i = 0; i < imgs.length; i++) {
$(imgs[i]).parent().text() = '';
imgs[i].show();
}
}
});
`
I can deal with it not restoring, but obviously I would prefer if it did.

Related

How can I change with onclick event of a <td>the color of the td? The critical point is that the td elements are generated dynamically with code

In my Blazor server app, I am reading the CNC Files of a remote machine and listing them in the table's rows.
So far everything is OK.
When the user clicks on one TD element, the content of the CNC file will be shown on the screen in another table(This part I have not shown because it is not related to my problem)
I want that the last choosen CNC file (last clicked ) should be highlighted (font=red).
That means each time when the user selects another CNC-File, just the related should be higlighted all others should be in default color (black).
If I would have a static table I would use the a:focus. But my problem is that my td's will be generated dynamically. And I have to apply the a:focus function for just one td (that was clicked).
How can I do that?
I have tried to call a function in the style of the td style="#Style_CNC_File()" but the colors that I define in the function are applied to all of the td's.
Here is my code:
<table >
<tr>
<td>CNC Files</td>
</tr>
#{ if (Deltalogic.Return_Read_CNC_File == 0 && Deltalogic.Selected_CNC_File_Path_Type == "file")
{
for (var i = 0; i < Deltalogic.CNC_File_Array_lenght_dir - 1; i++)
{
var arg0 = "abc";
var arg1 = "def";
var arg2 = "ghi";
<tr >
<td style="#Style_CNC_File()" #onclick='#(e => Read_CNC_Files(arg0,arg1,arg2))'>/#Deltalogic.CNC_File_Out_Array_dir[i]</td>
</tr>
}
}
}
</table>
In my razor.cs file:
public string Style_CNC_File()
{
if (var_clicked == true)
{
return "color:#FF0000";
}
else
{
return "color:#000000";
}
}
Maybe you can set an id to your td and store the selected id :
<tr>
<td>CNC Files</td>
</tr>
#{ if (Deltalogic.Return_Read_CNC_File == 0 && Deltalogic.Selected_CNC_File_Path_Type == "file")
{
for (var i = 0; i < Deltalogic.CNC_File_Array_lenght_dir - 1; i++)
{
var arg0 = "abc";
var arg1 = "def";
var arg2 = "ghi";
<tr >
<td #onclick='#(e => HandleClick(i, arg0,arg1,arg2))' style="#Getstyle(i)">/#Deltalogic.CNC_File_Out_Array_dir[i]</td>
</tr>
}
}
}
</table>
#code {
int selectedId = -1;
void HandleClick(int id, string args0, string args1, string args2)
{
selectedId = i;
Read_CNC_Files(arg0,arg1,arg2);
}
void Getstyle(int id)
{
if (selectedId == i)
return "background-color:red;";
return string.Empty;
}
}
You can change the class or style as you want according to the index of the line.

Ignorning an Anchor in a JScript search function

I have this function for searching a table and displaying the rows that match my search input
function searchTable() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}
I would like to make one of the strings in the data clickable with a hyper link.
However this affects my search because the the link is inside my table data . So even thought it is not visible it is skewing the search results.
What argument could I add to my function to ignore the contents of my bracket and still find the text string in my table. Or how could I place my anchor outside my table data brackets and still have the string be a clickable anchor.
Ex of table row:
<tr>
<td>Abcès au cerveau</td>
<td>Neurologique</td>
<td></td>
</tr>
Sorry beginner question. I am also looking for an argument to highlight the results of my search if anyone has it.

How to sum a column value on result return by some search?

In above link we have a table and show data using a url.
I want to sum Forks column on the result return by search something in table.
Eg. if I search boot or anything in search box,then it is showing result. I also want to put a footer like this,
<tfoot>
<tr class='info'>
<td>Sum of Forks</td>
<td> forks sum of return search result </td>
</tr>
</tfoot>
How to do this ?
Fiddle Link
You could use getData method to achieve what you want.
You can add your own Javascript like so:
$('#table').on('search.bs.table', function(param) {
var data = $('#table').bootstrapTable('getData');
sumForks(data);
})
function sumForks(dataObject) {
var sum = 0;
for (var key in dataObject) {
// skip loop if the property is from prototype
if (!dataObject.hasOwnProperty(key)) continue;
var obj = dataObject[key];
for (var prop in obj) {
// skip loop if the property is from prototype
if(!obj.hasOwnProperty(prop)) continue;
//alert(prop + " = " + obj[prop]);
if(prop === 'forks_count')
sum += parseInt(obj[prop]);
}
}
$('#table .info .forks_sum').html(sum);
}
Updated your fiddle also: http://jsfiddle.net/e3nk137y/4005/
Is this what you wanted?

Insert an HTML table into sharepoint 2013 webpart script

I have a problem, I've created a simple webpart that perfoms basics CRUD OPERATIONS, I wanted to add an HTML table to format and display the results retrieved from the READ operation, here is the code for a better understanding:
function retriveListItem() {
execute(
"items?$orderby=Nom&$select=Nom,Cognom,Indirizz",
"GET",
"GET",
null,
function (data, status, xhr) {
$("#result").empty();
var string = "<table><tr><th>Nome</th><th>Cognome</th><th>Indirizzo</th></tr>";
$("#result").append(string);
string = string = "";
for (var i = 0; i < data.d.results.length; i++) {
var item = data.d.results[i];
string = "<tr><td>" + item.Nom + "</td><td>" + item.Cognom + "</td><td>" + item.Indirizz + "</td></tr>";
$("#result").append(string);
}
string = "</table>";
$("#result").append(string);
},
function (xhr, status, error) {
$("#result").empty().text(error);
});
}
But when the page is rendered in the browser if I hit the F12 key I discover that sharepoint automatically adds the tbody tag (which I haven't wrote) and it close the tag /table automatically in the wrong position here is the code rendered in the browser:
<div id="result">
<table>
<tbody>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Indirizzo</th>
</tr>
</tbody>
</table>
<tr>
<td>Giova</td>
<td>Nardi</td>
<td>Viale della Cagna, Verona</td>
</tr>
<tr>
<td>Antonio</td>
<td>Petrarca</td>
<td>Via Camello 31, Rovegna</td>
</tr>
<tr>
<td>Luca</td>
<td>Mandelli</td>
<td>Via Rossini, 32 Cesano Maderno</td>
</tr>
</div>
Does anybody knows why that? Any idea on how to workaround that issue? Thanks a lot
It looks like in your code, your string variable is just overwriting itself, and you are posting the results to the browser each time. Rather than using .append() each time you update the string, just use a string += .... and then append after the loops have run and the string is populated with the full table.
Here is a JSFiddle as an example using your code (for the most part).
So your code would look like:
function retriveListItem() {
execute(
"items?$orderby=Nom&$select=Nom,Cognom,Indirizz",
"GET",
"GET",
null,
function (data, status, xhr) {
$("#result").empty();
var string = "<table><tr><th>Nome</th><th>Cognome</th><th>Indirizzo</th></tr>";
//$("#result").append(string);
//string = string = "";
for (var i = 0; i < data.d.results.length; i++) {
var item = data.d.results[i];
string += "<tr><td>" + item.Nom + "</td><td>" + item.Cognom + "</td><td>" + item.Indirizz + "</td></tr>";
//$("#result").append(string);
}
string += "</table>";
$("#result").append(string);
},
function (xhr, status, error) {
$("#result").empty().text(error);
});
}
Hope this helps!
You can always insert HTML into an existing table using JQuery's after() method. Since you have a first <tr> already, you can poke in your built up HTML after that first row:
// First, put your basic table into #result
$("#result").html('<table id="resulttable"><tr><td>...</td></tr></table>');
// Next build up the necessary rows and columns
for (var i = 0; i < data.d.results.length; i++) {
// Build up your string as above
}
// Next, poke it into the DOM after the first <tr>
$("#resulttable tr").first().after(string);
You will find a full mockup below. The results data and the code to populate rows is shown in the page's <head> section. Below that, in the <body> a table is defined with ID mytab. That ID is picked up in the code that populates the rows.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
data = { d : {
results: [
{ Nom: 'nom1', Cognom: 'Cognom1', Indirizz: 'Indirrizz1' },
{ Nom: 'nom2', Cognom: 'Cognom2', Indirizz: 'Indirrizz2' },
{ Nom: 'nom3', Cognom: 'Cognom3', Indirizz: 'Indirrizz3' } ] } };
$(document).ready(function() {
for (var i = 0; i < data.d.results.length; i++) {
item = data.d.results[i]
str = '<tr><td>' + item.Nom + '</td><td> ' + item.Cognom +
'</td><td>' + item.Indirizz + '</td></tr>';
$('#mytab tr').first().after(str);
}
});
</script>
</head>
<body>
<table id="mytab">
<tr>
<td>First column</td> <td>Second column</td> <td>Third column</td>
</tr>
</table>
</body>
</html>

How to use ordered list <ol> in a table and numbering each table row <tr>

I have an HTML table used to display some information in the correct form.
Now, my goal is to number each table row.
For that, I have tryed to use ordererd list and list items inside the table but it seems not to work.
Do you have an idea and an example on how to do this. Thank you.
Not sure about HTML you you can definitely do this in jQuery:
$(function () {
var i = 0;
$('table thead tr').prepend('<th>#</th>');
$('table tbody tr').each(function () {
i += 1;
$(this).prepend('<td>' + i + '</td>');
});
});​
DEMO
UPDATE
If you want numbers only on specified class (number) then try:
$(function () {
var i = 0;
$('table thead tr').prepend('<th>#</th>');
$('table tbody tr').each(function () {
i += 1;
if($(this).hasClass('number')) {
$(this).prepend('<td>' + i + '</td>');
} else {
$(this).prepend('<td></td>');
}
});
});​
DEMO
Just in case, here is a single line selector for getting all the first TDs in a table - excluding THs.
I then add whatever element I want, before them. In this case, I print a counter variable, to enumerate the rows. The effect is I am making the table rows numbered.
var counterVariable = 1;
var mySpanClass = ""; //to style the numbering...
$(".myTableClass tr:not(:first) td:first-child").before(function(){ return "<span class='" + mySpanClass + "'>" + counterVariable++ + "</span>"; });