I have a problem while generating a list of live search results - I put them in a special div with id "result" the way below (dont mind the SightsList, this is an AJAX - pre-retrieved array; also the algorythm is not optimal, I know it, but that's not the subject). So the main issue is why table rows get thrown out of a table? Html in browser looks like <table></table><tr><td>(and then all the lines generated). The same problem goes with <ul> and <li>.
$("input#namebox").keyup(function() {
var value = $(this).val();
value = value.toLowerCase();
value = $.trim(value);
if (value.length > 3) {
$("#result").html("<table>");
for (var i=0; i<SightsList.length; i++) {
if (undefined != SightsList[i]) {
if (void 0 != SightsList[i]) {
SightsList[i] = SightsList[i].toLowerCase();
if (SightsList[i].indexOf(value)+1) {
$("#result").append('<tr><td class="singleresult" valign="middle">' + SightsList[i]+ ' – ' + '<img src="/images/balloon.gif" rel="'+ i +'" class="balloon_img" /></td></tr>');
$("#message").show();
}
}
}
if (i==(SightsList.length-1)) {
$("#result").append("</table>");
}
}
//tried to close table here with the same (no) result $('.singleresult').highlight(value);
$("#result").show();
}
if (value.length < 4) {
$("#result").hide();
$("#result").html("");
}
}
.html and .append aren't just string functions, they work on the DOM.
$("#result").html("<table>") places a table in the #result element. Since there are no rows specified, it is an empty table (<table></table>). Then your .append tries to put a row after that table.
So instead of appending to the contents of #result, you want to append to the table you are creating:
$("#result > table").append('<tr><td class="singleresult" valign="middle">' + SightsList[i]+ ' ' + '<img src="/images/balloon.gif" rel="'+ i +'" class="balloon_img" /></td></tr>');
and remove your attempt to add an end-table tag.
Related
As the code below shows, I am appending a table with some table rows containing table data. The table data is getting appended with excel formula inside. How can I change the count variable inside td.class after it was appended in table upon click event or something similar.
I Want to update td.excel count attribute with onclick event
.append("<td class="
excel " x:num x:fmla=\"=SUM(H" + count + " *I" + count + ")
$("#example").on("click", "button", function() {
$(this).closest("tr").remove();
count--;
var i = 10;
for (i = 10; i < count; i++) {
let div1 = document.getElementsByClassName("excel");
var attribute = div1.SetAttribute(count, count);
}
}
Your problem is not clear. But what I've got from your question is that you want to dynamically append to . But you end up with excel formula getting inside it.
So, according to me when you want to insert something dynamically then you should use `` these quotes instead of '' and "". eg :-
var i = 1;
.append(`<td class="hello${i}"></td>`)
(JS Fiddle full code is below)
I am selecting a value from a dropdown which then based on selection will update the next table 'td' with a value.
I am then looping through the table 'tr' to get a ";" separated list of all the values
In my fiddle example, I have simplified it to 2 columns where if you select "1" from the dropdown, the next field is updated with 10 and then the next row, the same
My goal is to get a list of the values in the table
For Example 1;10
2;8
For some reason, I am looping through the table: "Get Data Button initiates loop")
$(this).find("td").filter(':visible').each(function (index) {
if (index === 1) {
if ($(this).find("span").val() != undefined) {
values += $(this).find("span").val() + ";";
}
if ($(this).find("text").val() != undefined) {
values += $(this).find("text").val() + ";";
}
if ($(this).find("label").text() != undefined) {
values += $(this).find("label").text() + ";";
}
if ($(this).find("select option:selected").text() != "") {
values += $(this).find("select option:selected").text() + ";";
}
}
});
But whether I use .text(), val(), inner or outerHTML it is always ""
Thanks
http://jsfiddle.net/motti10/hjdyxv7n/4/
Don't know exactly what the purpose is, but I have the output wanted with this solution:
if (index === 0)
{
if ($(this).find("span").val()) {
values += $(this).find("span").val() + ";";
....
updated the fiddle as well http://jsfiddle.net/hjdyxv7n/5/
I have the following code and it works when there are rows in a table. however I need to add a contains logic where rowCount=0 if td contains "There are no items to show in this view".
https://jsfiddle.net/xnyLq1na/
var rowCount = $(".ms-WPBody tr").not(":has(th)").length;
if ($('.ms-WPBody tr >td:contains(there are no items)')
{
alert ("found it");
rowCount = 0;
}
$(".rowCount").text("Num of rows: " + rowCount);
changed the logic, fetching the html inside <a> tag and then comparing to see if it contains the required String.
you were missing a ) after ("there are no items")') too.
$(document).ready(function(){
var rowCount = $(".ms-WPBody tr").not(":has(th)").length;
var x = $('.ms-WPBody tr td a').html();
//alert(x.indexOf("there are no items"));
if(x.indexOf("There are no items") !== -1){
//alert ('found it');
rowCount = 0;
}
$(".rowCount").text("Num of rows: " + rowCount);
});
EDIT Update:- changed the logic, fetching the html inside <a> tag and then comparing to see if it contains the required String.
Fiddle here
Is there a plugin or way to make certain table columns (not rows) editable and others not editable
with jQuery?
I have seen plugins for clicking on a cell to make it editable, but I mean explicitly making a cell/column editable or not.
I have a way of doing it but it feels like a bit of a hack job.
Here is my function for making a column editable:
function isEditable(rowArray, headersArray)
{
var counter = 0;
var notEditable = ['product code', 'product'];
for(i in rowArray){
counter = 0;
data = headersArray[i].toLowerCase();
for(a in notEditable){
if(data == notEditable[a]){
counter++;
}
}
if(counter > 0){
rowArray[i] += 'notEditable';
}
}
return rowArray;
}
it compares the header of the cell to an array of predefined values which = a non-editable column.
Then I build the row:
function buildHTMLTableRow(row, mutable)
{
output = '';
output += '<tr>';
for(var i = 0; i < row.length; i++)
{
value = trim(row[i]);
if(mutable){
index = value.indexOf('notEditable');
if(index != -1){
value = value.substring(0, index);
output += '<td>' + value + '</td>';
}
else{
output += '<td><input size="5" type="text" value="' + value + '" /></td>';
}
}
else{
output += '<td>' + value + '</td>';
}
}
output += '</tr>';
return output;
}
The mutable parameter decides if the row is editable or not, and the indexOf('noteditable') decides for the cell(but pretty much column) from the isEditable function.
Is there a plugin that does this better, or should I just settle with what I have?
Visit this jsFiddle link: Disable Columns
Following is the data flow:
I have created a row Array named "rowsD". When page loads I am populating my table (id=myData) with these rows.
Now creating another array called disableHeaders wherein I am passing the headers,
which you need to disable entire columns.
I am calling function disableFields passing disableHeaders as parameter
In the function, first I am fetching the index of the header whose value is equal to the values in headers array
If I find one, then from Input tag I am extracting the Value attribute using $(this).find('input') selector
Finally I am replacing the current child with Label tag passing the extracted Input tags Value
You may also comment out disableFields(disableHeaders); line to actually see, how table gets rendered initially
Thank you
I have a div containing a group of divs.
I want the divs inside to work as links that move to another page after saving this link's value.
The div consists of the id in the div attribute, & the name in the div's value as follows:
Html:
<div id="ClasssesList" ></div>
jQuery:
function GetClassesList(data) {
var classes = (typeof data) == 'string' ? eval('(' + data + ')') : data;
$('#ClasssesList').empty();
for (var i = 0; i < classes.length; i++) {
var text = '<button class="BigDiv" value="' + classes[i].Cls_ID + '" >' + classes[i].Cls_Name + '</button>';
$('#ClasssesList').append(text);
}
}
I want to save the value of the clicked id in a localStorage then move to the next page:
I tried to make it as follows, but it doesn't seem to be working:
$("#ClasssesList").bind('click', 'button.BigDiv',CallLink());
function CallLink(e) {
localStorage['ClassID'] = $('Button.BigDiv').attr('value');
window.location.replace("Teacher_Attendance.htm");
}
Do you know what should I do to let it work ?
function CallLink(e) {
localStorage.setItem('ClassID', $('Button.BigDiv').attr('value'));
window.location.replace("Teacher_Attendance.htm");
}
And to get that item try:
localStorage.getItem('classID');
Format to set data to localStorage is
localStorage.setItem(key, value);
here value is string format;
you will get more here Microsoft, Mozilla and Apple.
And one note
I think your bind function
$("#ClasssesList").bind('click', 'button.BigDiv',CallLink())
should be written as
$("#ClasssesList").on('click', 'button.BigDiv',CallLink())