I have this code
(in script):
var response = [{
"A":"a2",
"B":"b2",
"C":"c2"
},
{
"A":"a3",
"B":"b3",
"C":"c3"
},
{
"A":"a4",
"B":"b4",
"C":"c4"
}];
$.each(response, function(i, item) {
$('<tr>').html(
//"<tr>" +
"<td>" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>" + "</tr>").appendTo('#MyTable tbody');
});
and I want to change one of column (just for exp it's will be "A") to be "edited" by text-box.
I am tring this:
... `"<td><input type="text">" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>" + "</tr>").appendTo('#MyTable tbody');`...
but it's not working.
any help please!
If i understood correctly,
Instead of creating <tr>, later adding contents to it using html() and finally appending to do the <table>, you can directly add everything altogether to the <table> using append() method.
$.each(response, function(i, item) {
$('#MyTable tbody').append("<tr>"
+"<td><input type='text' value='"+ response[i].A +"'/> </td><td><input type='text' value='"+ response[i].B +"'/></td><td><input type='text' value='"+ response[i].C +"'/></td>"
+ "</tr>");
});
Try saying This
var firstcell = "<td><input type="text" value="VALUE"</td>";
firstcell = firstcell.replace('VALUE', response[i].A);
Use this for first cell in each Row. After that append this in whole row.
Related
I am working on a project and the project was created with ASP.Net mvc 5.
I get the data from the database and I just want to display the data on the user interface. My problem is, I have all the data I want in the browser console, but the checkboxes are not shown checked. How can I do this?
"<input type='checkbox' value='" +item.IsActive+"'/>"
Here is my code:
function success(data) {
var rows;
if (data != null) {
$.each(data, function (i, item) {
rows += "<tr>"
+ "<td>" +
"<label class='checkbox-container' id ='checkbox-container'>" +
item.Name+
"<input type='checkbox' value='" + item.IsActive+"'/>" +
"<span class='checkmark'>"+"</span>"+
"</label >"+
"</td>"
});
$('#myTable tbody').append(rows);
}
else {
alert("Something went wrong");
}
}
Maybe some js logic would help?
$.each(data, function (i, item) {
var checkbox_input = "<input type='checkbox' value='" + item.IsActive+"'/>";
if(item.IsActive){
var checkbox_input = "<input type='checkbox' value='" + item.IsActive+"' checked />";
}
rows += "<tr>"
+ "<td>" +
"<label class='checkbox-container' id ='checkbox-container'>" +
item.Name+
checkbox_input +
"<span class='checkmark'>"+"</span>"+
"</label >"+
"</td>"
});
Or Shorthand with template literal js
$.each(data, function (i, item) {
rows += "<tr>"
+ "<td>" +
"<label class='checkbox-container' id ='checkbox-container'>" +
item.Name+
`<input type='checkbox' value='${item.IsActive}' ${item.IsActive ? 'checked' : ''} />` +
"<span class='checkmark'>"+"</span>"+
"</label >"+
"</td>"
});
If you want a checkbox to show checked, it should have the checked attribute. In this case it would be something like:
<input type='checkbox' checked/>
Since you have a variable that tells you wether the checkbox is checked or not, you could try using:
"<input type='checkbox'" + item.isActive ? "checked" : "" + "/>"
This will render the checkbox as checked when item.isActive is true.
I have one service which gives me lots of Data from back-end. I have to show that in a table using jquery.
I shows every data but unable to show the materialDetails in a selectbox.
Could anyone help me on this ?
$.each(response.data[0].listRawItemDetails, function (i) {
$("#received_item > tbody").append("<tr>" +
"<td>" + '<input type="hidden" name="fabricId'+i+'" value="'+response.data[0].listRawItemDetails[i].fabricId+'">'+ response.data[0].listRawItemDetails[i].fabriceCode + "</td>" +
"<td>" + '<input type="hidden" name="measurementRange'+i+'" value="'+response.data[0].listRawItemDetails[i].measurementRange+'">'+ response.data[0].listRawItemDetails[i].measurementRange + ' ' +response.data[0].listRawItemDetails[i].measurementType+ "</td>" +
"<td>" + '<input type="text" name="rate_'+i+'" id="rate_'+i+'" class="form-control rateCheck" value="" placeholder="Per '+response.data[0].listRawItemDetails[i].measurementType+'" style="width: 100px;" required="required">'+"</td>" +
"<td>" + '<span class="totalAmt'+i+'"></span>' + "</td>" +
**"<td>" + '<select class="form-control" id="materialDetails'+i+'"><option value="">-Select-</option></select>' + "</td>" +**
"</tr>");
}) //foreach
From response.data[0].listRawItemDetails[i].meterials I'm getting list of materials, I need to show that data, in last table data as a selectbox for each row.
I added these lines of code it works for me..
$.each(response.data[0].listRawItemDetails, function (i) {
$.each(response.data[0].listRawItemDetails[0].meterials, function(index, value) {
$('#materialDetails'+i).append('<option value="' + value+ '">' + value+ '</option>');
});
}); //foreach
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 ;) ).
I have dynamically generated table using jquery. I want a cell of the table be converted to a textbox when clicked.
$.each(proc_msg, function (i, item) {
trHTML += "<tr><td>" + item.hq_code + "</td><td id='hq_" + item.hq_name + "'>" + item.hq_name + "</td>";
trHTML += "<td><a href='#' id='hq_ed_" + item.hq_name+_"' onClick='dataAction(this.id);'>Edit</span></a></td>";
});
$('#tbl_hqlist').append(trHTML);
function dataAction(dataValue){
var sectionName=dataValue.substr(0,2);
var hq_zone=dataValue.substr(5);
var zone_id ="";
zone_id= zone_id.concat("'#",sectionName, hq_zone,"'");
var tempHTML ="<input type='text' id='" + zone_id + "' value='" + hq_zone + "' />";
$(zone_id).html(tempHTML);
}
This code is throwing up error where "zone_id" is not defined.
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
});
}