How can I initialize class or title in string in jquery - javascript

Variables pass, time and place are inputs from HTML, so when I click on button I am appending new row in the table, but every new row appended need to have different class and title, and that should be get from place input i.e. place.val().
$("button").click(function() {
var pass = $("#pass");
var time = $("#time");
var place = $("#place");
$("table").append("<tr><td>" + pass.val() + "</td><td>" + time.val() +
"</td>" + "<td title=place.val() class=place.val()>" + 2 + "</td></tr>");
});

Try this:
$("button").click(function() {
var pass = $("#pass");
var time = $("#time");
var place = $("#place");
$("table").append("<tr><td>" + pass.val() + "</td><td>" + time.val() +
"</td>" + "<td title=" + place.val() + " class=" + place.val() + ">" + 2 + "</td></tr>");
});

Related

How to get JSON result in grid/tabular format while calling an API?

I'm using railway API in my website and want the Train data in grid format. Please help me with the same.
I want all the variables (Train name, Train number, Departure Time, Arrival Time, Travel Time, Availability Status) in a table format. I'm calling two APIs to get the final result. How can I achieve this using AngularJs?
function between(trainData) {
var total = trainData.TotalTrains;
for (i = 0; i < total; i++) {
var source = trainData.Trains[i].Source;
var destination = trainData.Trains[i].Destination;
var name = trainData.Trains[i].TrainName;
var number = trainData.Trains[i].TrainNo;
var ttime = trainData.Trains[i].TravelTime;
var deptime = trainData.Trains[i].DepartureTime;
var arrtime = trainData.Trains[i].ArrivalTime;
$('.' + className + '').append("<br/>" + name + "(" + number + ")" + " " + ttime + " " + deptime + " " + arrtime + "<br/>");
}
}
}
you can append with the in the end like
$('.' + className + '').append("<table><tr><th>name</th><th>number </th><th>ttime </th><th>deptime </th><th>arrtime </th><th>classcode </th><th>status </th><th>jdate </th></tr><tr><td>" + name + "</td><td>" + number + "</td><td>" + ttime + "</td><td>" + deptime + " </td><td>" + arrtime + " </td><td>" + classcode + "</td><td>" + status + "</td><td>" + jdate + "</td></tr></table>");

Javascript Append Function, Need to build a loop

I have a .php file where I am using both HTML and JavaScript to display items from my database. I have a JavaScript append function that is creating cards where each item is display. On my cards, I have a button that will expand the card to show product history. Some products have more history than others so the expansion needs to be dynamic. The historical data is being pulled from database and is initially in a php array. I originally was going to institute php into the javascript append function but I could not figure out how to set the JavaScript index variable 'I' to my php index. So I want to just stay with JavaScript. But I don't know how to write a loop in the middle of this append function that will loop through the historical array and populate the expansion. Below is what I am attempting. I took out a lot of the lines in the append function but you can see what I am trying to do.
function get_products() {
clear_cards();
$.each(productNumbers,
function(i, value) {
$('.main_card_shell').append(
"<div class='card_content card_style' id='card" + i + "'>" +
"<div id='card_tab2" + i + "' class='tabcontent' data-tab='tab-name2'>" +
"<div class='details_tables'>" +
"<table>" +
"<tr>" +
"<th>Item Type</th>" +
"<th>Painted</th>" +
"<th>Last Sold" +
"<a id='_close_tab" + i + "' class='tablinks tab_override' onclick=\"openCity(event,'card_tab4" + i + "')\">" +
"<i class='large angle up icon'></i>" +
"</a>" +
"</th>" +
"</tr>" +
"<tr>" +
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength)
{
+ "<td>" + itemtypesplit[counter] + "</td>" +
+ "<td>" + itemdatesplit[counter] + "</td>" +
counter = counter + 1;
}
+
"</tr>" +
"</table>" +
"</div>" +
"</div>" +
Please help. I had it working with PHP inserted in, but I just couldn't figure out how to set it to a PHP variable.
Place this code into a function:
function getSomething(i) {
var html = '';
var itemdatesplit = itemdate[i].split("$$");
var itemtypesplit = itermtype[i].split("$$");
var itemsplit = item[i].split("$$");
var arraylength = itemsplit.length;
var counter = 0;
while(counter < arraylength) {
html += "<td>" + itemtypesplit[counter] + "</td>";
html += "<td>" + itemdatesplit[counter] + "</td>";
counter = counter + 1;
}
return html;
}
And then use it in your HTML building block:
'<some html>' + getSomething(i) + '<some other html>'

Add HTML code inside of a JS var that contains an HTML element

I need to add a list of task after to click one row in a html table I'm using knockout js. the problem is that I'm just adding de last task from my data in a row and I need to add a new TR inside my element "$taskSelected" for each task. Here is my code
self.retrieveTask = function(data, event) {
if (event.type=="click") {
var id = data.Id;
var $taskSelected = event.currentTarget.parentElement.nextElementSibling;
$.get("#Url.Action("Method", "Controller")", { id: id })
.done(function(data) {
$.each(data, function(key, value) {
var html = "<tr><td>" +
"</td>" +
"<td>" +
" <div >" +
+ value.Type +
"</div> " +
"</td>" +
"<td>" +
" <div >" +
value.Id +
"</div> " +
"</td>" +
"</tr>";
$taskSelected.innerHTML=html;
});
}).fail(function() {
alert("error");
});
};
}
the var $taskSelected contains another row "<tr> </tr>" basically Ii want to nested rows. Some advises please
Try this:
self.retrieveTask = function(data, event) {
if (event.type=="click") {
var id = data.Id;
var $taskSelected = event.currentTarget.parentElement.nextElementSibling;
$.get("#Url.Action("Method", "Controller")", { id: id })
.done(function(data) {
var html = "";
$.each(data, function(key, value) {
html += "<tr><td>" +
"</td>" +
"<td>" +
" <div >" +
+ value.Type +
"</div> " +
"</td>" +
"<td>" +
" <div >" +
value.Id +
"</div> " +
"</td>" +
"</tr>";
});
$taskSelected.innerHTML=html;
}).fail(function() {
alert("error");
});
};
}
All I did was move var html outside of your each loop. This makes sure that all your previous HTML stays inside the variable, otherwise you are overwriting html each time you run through the loop (This is why you're only outputting the last one ;) ).

jquery val() coming up as blank after .each()

I'm iterating with
function editRow(a) {
$("td").each(function () {
alert($(this).val())
});
}
which iterates through
$("tbody").append(
"<tr id = '" + trId + "'>" +
"<td name = 'nameRow' id = 'name" + idCt + "' value = 'test' > <strong>" + name + "</strong> </td>" +
"<td name = 'maxRow' id = 'max" + idCt + "' value = '" + max + "'>" + max + "</td>" +
"<td name = 'setRow' id = 'sets" + idCt + "' value = '" + sets + "'>" + sets + "</td>" +
"<td name = 'repRow' id = 'reps" + idCt + "' value = '" + reps + "'>" + reps + "</td>" +
"<td name = 'restRow' id = 'rest" + idCt + "' value = '" + rest + "'>" + rest + "</td>" +
"<td id = 'link" + idCt + "'><a href='#' onclick='return deleteRow(" + trId + ");' >Remove</a>" +
" | <a href='#' onclick='return editRow(" + idCt + ");'>Edit</a></td>" +
"</tr>"
);
The alter($(this).val()) is coming up the correct amount of times, but it is always just blank (not undefined)).
I know it's not that readable, but does anyone see an error?
Thanks!
.val() is a method which is only defined for input elements. Normal HTML elements don't have a value. You should use .html() or .text() to get the content of those elements
function editRow(a) {
$("td").each(function () {
alert($(this).text())
});
}
You should define non-standard attributes (like value for <td>) using the data- prefix
<td data-value="whatever">...</td>
Then you can use jQuery's .data() method to access those attributes
var tdDataValue = $(this).data('value');
The problem is that "td" - elements haven't values. They have inner HMTL. If you want to get td's content, you need to use $(this).html()
function editRow(a) {
$("td").each(function () {
alert($(this).html())
});
}
The val method is usually reserved for input tags. For td you can do either:
$(this).text();
or
$(this).attr('value');
simply try something like this
function editRow(a) {
$("td").each(function () {
alert(this.innerText);// reading inner text
alert($(this).attr('value'));// reading value attribute
});
}

Making multiple elements with jquery each() and jquery function

Well, I have a table with multiple text nodes I'm getting through the .text() function and linking to another table with one row that I'm using as a timeline.
I tried to input in a single td of the text values that corresponds to the correct data, but I only managed to grab the last value I in my loop, instead of getting them all. Here is my code:
var tHold, divLine, id, dataTitle, dataDescription;
$(".class1").each(function(){
tHold = $(this);
$(".class2").each(function(){
if ($(this).text() == tHold.attr("value")){
if($('#1').children("div#" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="' + tHold.attr("name") + '" class="b" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#1").append(divLine);
}
if($('#2').children("div#id" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="des' + tHold.attr("name") + '" class="c" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#2").append(divLine);
}
}
});
});
It's been simplified and cut out of a whole context , but all that matters is there. How can I set dataDescription to be multiple divs with diferent values instead of just the last I loop through?

Categories