So.. I have 2 jquery functions that append something to a table.
the first one doesn't work , the second function does work? while in the first function my HTML var is filled with the good information to append, it just doesn't append it??
function buildTable(data) {
var html = "";
$.each(data, function (key, value) {
html += "<tr>";
html += "<td><a class='delete'><i class='fa fa-thrash'></i></a></td>";
html += "<td class='key'>" + key + "</td>";
html += "<td class='val'>" + value + "</td>";
html += "<td></td>";
html += "</tr>";
//$(".table > tbody").prepend(html);
//$(".addrow").append(html);
//$("#parameterTable > tbody").append(html);
});
$('.addrow').prepend(html);
//$(".formTable ").prepend(html);
}
Second function (the one that does work)
function addNewParameter() {
if(!added) {
var html = "<tr>";
html += "<td></td>";
html += "<td><input type='text' class='parameter1' name='Parameter1'></td>";
html += "<td><input type='text' class='parameter2' name='Parameter2'></td>";
html += "<td><a class='save'><i class='fa fa-save'></i></a><a class='undoAdd'><i class='fa fa-undo'></i></a></td>";
html += "</tr>";
$(".addrow").append(html);
added = true;
} else {
showWarning("u heeft al een parameter toegevoegd, sla deze eerst op.");
}
}
The HTML where I need to append it
<table class="formTable table table-striped table-bordered table-hover dataTable" id="parameterTable">
<thead>
<tr>
<td class="col-md-2"></td>
<td class="col-md-4">
Naam
</td>
<td class="col-md-4">
Waarde
</td>
<td class="col-md-2"></td>
</tr>
</thead>
<tbody class="addrow">
</tbody>
</table>
I have been struggling with this for a while, any help would be nice
Have you tried it like this?
function buildTable(data) {
var html = "";
$.each(data, function (key, value) {
html += "<tr>";
html += "<td><a class='delete'><i class='fa fa-thrash'></i></a></td>";
html += "<td class='key'>" + key + "</td>";
html += "<td class='val'>" + value + "</td>";
html += "<td></td>";
html += "</tr>";
});
$('.addrow').append(html);
}
Proper usage of jQuery does not require ending tags:
function addNewParameter() {
if (!added) {
var newHtml = $('<tr>');
newHtml.append($('<td>'));
newHtml.append(
$('<td>').append(
$('<input>'.addClass("parameter1").attr({"name":"Parameter1","type":"text"}))
)
);
html.append(
$('<td>').append(
$('<input>').addClass("parameter2").attr({"name":"Parameter2","type":"text"})
)
);
html.append(
$('<td>').append(
$('<a>').addClass('save').append(
$('<i>').addClass("fa fa-save")
),
$('<a>').addClass('undoAdd').append(
$('<i>').addClass("fa fa-undo")
)
)
);
$('.addrow').append(newHtml);
added=true;
}
else {
showWarning("u heeft al een parameter toegevoegd, sla deze eerst op.");
}
}
It was a problem with a bootstrap dialog , after the dialog was loaded and then the append function it worked
Related
I want to add the dynamic dropdown list to each row when I click the add button and I have written this below code to achieve this and values are coming but not like dropdown list
example code is :-
var ddlInputParameters = $("<select class='input-small' id='ddltype'></select>");
$.each(data.d, function (key, value) {
if (value.Type == "inputparameters") {
//var option = $("<option />");
var option = $("<option></option>");
option.html(value.TypeData);
option.val(key);
ddlInputParameters.append(option);
}
});
//Initially When the page is loaded I'm checking the length and adding the records to jquery table
if ($("#EntryParametersTableDataID,#EntryParametersTableRightDataID tbody").children().children().length == 1) {
var trd = "";
trd += "<tr>";
//trd += "<td hidden='hidden'><button class = 'btn btn-danger btn-sm'> delete </button></td>";
trd += "<td>";
//trd += "<select class='input-small' id='ddltype'><option value='1'>Pts</option><option value='2'>%</option></select>";
trd += ddlInputParameters.html(); //Here I want to add(bind)that dropdown list
trd += "</td>";
trd += "<td>";
trd += "<select class='input-small' id='ddlexit'><option value='1'>None</option><option value='2'>Sq Off Leg</option><option value='3'>Sq Off Strategy</option><option value='4'>Partial Exit</option></select>";
trd += "</td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "</tr>";
$("#EntryParametersTableRightDataID tbody").append(trd);
}
Output is coming like values not like dropdown list this :-
Suggest me where I did the mistake and how can I achieve this.
I'm very new to this jQuery logics.
Try using ddlInputParameters.outerHTML() instead of ddlInputParameters.html() in trd += like below.
trd += ddlInputParameters.outerHTML(); //Here I want to add(bind)that dropdown list
The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string.
The outerHTML attribute is not worked in my scenario and I have changed the existing logic like below and it's work well to me
var optionsdata = '';
$.each(data.d, function (key, value) {
if (value.Type == "inputparameters") {
optionsdata += "<option value="+key+">"+value.TypeData+"</option>";
});
var ddlInputParameters = "<select class='input-small' id='ddltypeauto'>" + optionsdata + "</select>";
And I have added this ddlInputParameters to <td> like this trd += ddlInputParameters;
I have this list made on sweetalert2
*** this is the code ***
function detalleTransf(matricula, bancoorigenTransf, cbu_cta_origen, titular_cta_origen, ultimos_digitos_cta_origen) {
var datosTransferencia = {{ datosTransferencia|json_encode|raw }} ;
let html = "<html><body>"
html += "<div class='table-responsive'><table class='table table-hover table-condensed no-border'>" +
"<tr class='encabezado-tabla'> <td class='text-center'>Seleccionar </td><td class='text-center'> Matricula</td><td class='text-center'> Banco de Origen</td><td class='text-center'>CBU Cuenta Origen</td><td class='text-center'>Titular Cuenta Origen</td><td class='text-center'>Últimos 5 Dígitos Cuenta Origen</td> </tr>";
for (let row of datosTransferencia) {
html += "<tr id='algo'><td class='text-center'><div class='radio'><input type='checkbox' name='check' value='value' id='regular' onclick='prueba()' ><label style='display: none'>" + "</div></label></td>";
html += "<td class='text-center'>" + matricula + "</td>";
html += "<td class='text-center'>" + row.transf_banco + "</td>";
html += "<td class='text-center'>" + row.transf_cbu + "</td>";
html += "<td class='text-center'>" + row.transf_titular + "</td>";
html += "<td class='text-center'>" + row.transf_ctaorigen + "</td></tr>";
}
html += "</table></div>";
html += "</body></html>";
return html;
};
with this function I select each cell of a specific row and insert it into an input field
function test() {
var value1 = document.getElementById("bancoorigenTransf").innerText.replace(/\s+/, "");
var value2 = document.getElementById("cbu_cta_origen").innerText.replace(/\s+/, "");
var value3 = document.getElementById("bancoorigenTransf").innerText.replace(/\s+/, "");
var input = $('#titularorigen666');
var input2 = $('#cbuorigen');
var input3 = $('#bancoorigen');
input.val(input.val() + value1 + ', ');
input2.val(input2.val() + value2 + ', ');
input3.val(input3.val() + value3 + ', ');
return false;
};
The error I have is that it always selects the first row only.
the only solution i could think of is to add a unique id to it in the for loop but i don't know how to do it or if there is a better solution
One answer to this question can be found here, if you are only interested in getting the nth row of a table via JavaScript:
var cells = document.getElementById('table').getElementsByTagName('td');
This will contain all your table cells. Use array notation to access a specific one:
cells[4]
Here's a quick demo which changes the background color:
http://jsfiddle.net/jackwanders/W7RAu/
I have JSON data and from that i am building my Table. Below is an extract of my code.
var table = '';
table = " <table class='table table-bordered table-striped mb-0' id='datatable-tabletools'>";
table += "<thead>";
table += "<tr>";
table += "<th> <i class='glyphicon glyphicon-wrench'></i> Actions</th>";
table += "<th>PAX</th>";
table += "<th>Group No</th>";
table += "<th>Group Name</th>";
table += "</tr>";
table += "</thead>";
table += "<tbody>";
for (var j = 0; j < data.length; j++) {
table += "<tr>";
table += "<td>" + data[j]["PAX"] + "</td>";
table += "<td>" + (data[j]["GroupNo"] == undefined ? '' : data[j]["GroupNo"]) + "</td>";
table += "<td>" + (data[j]["GroupName"] == undefined ? '' : data[j]["GroupName"]) + "</td>";
table += "</tr>";
}
table += "</tbody>";
table += "</table>";
$('#gridContainer').html(table);
$("table#datatable-tabletools").dataTable();
As you can see in the code above I am trying to append it to a div with id="gridContainer". Up till here I have things up and running as required but the issue is my EXPORT bar doesn't appear at all. Currently, the searching, sorting functionalities and the table structure are all fine. Below is a screenshot of how it looks currently.
But when i declare a static table instead of appending the table to a DIV tag it appears fine and the exporting options also appear and are functiona. This is how the top header looks then
How to resolve this issue?
Actually i am looking to copy the checked rows from the table of one div (table 1) to table of another div(table 2). But with the below script, when i check more than one checkbox, the first checked row is replaced by the lastly checked row. But i want like each checked row of table 1 should come in table 2 as one by one.
Any help appreciated. Thanks in advance!!!
HTML
<div class="form-group" id="jqcc" >
<table id="order-table" name="order-table">
<tr>
<th>Select</th>
<th>Medication</th>
<th>Max Issue Limit</th>
</tr>
<tbody></tbody>
</table>
</div>
Javascript
<script>
var tableControl = document.getElementById('order-table');
$('#jqcc').click(function () {
var result = []
var x1;
var tab;
var count = document.querySelectorAll('input[type="checkbox"]:checked').length;
$('input:checkbox:checked', tableControl).each(function () {
result.push($(this).parent().next().text() + "," + "<br>"); // refers title of product
$(this).closest('tr').find('input').each(function () {
x1 = $(this).val(); // refers price of product
})
tab = "<tr><td>" + result + "</td>";
tab += "<td>" + x1 + "</td>";
tab += "<td>" + x1 + " </td>";
tab += "<td><button type='button' onclick='deletePerson(this);' class='btn btn-default'> <span class='glyphicon glyphicon-remove' /></button></td>";
tab += "</tr>";
tab += "</tbody>"
$("#charges").html("<table id='peopleTable' class='table table-bordered table-condensed table-striped'><thead><tr><th>Description</th><th>Actual Amount</th> <th>Claim Amount</th> <th></th></tr></thead>" + tab + "</table>").show();
});
});
</script>
You try to change:
<script>
var tableControl = document.getElementById('order-table');
$('#jqcc').click(function () {
var result = []
var x1;
var tab = "";
var count = document.querySelectorAll('input[type="checkbox"]:checked').length;
$("#charges").html("<table id='peopleTable' class='table table-bordered table-condensed table-striped'><thead><tr><th>Description</th><th>Actual Amount</th><th>Claim Amount</th> <th></th></tr></thead><tbody></tbody></table>").show();
$('input:checkbox:checked', tableControl).each(function () {
result.push($(this).parent().next().text() + "," + "<br>"); // refers title of product
$(this).closest('tr').find('input').each(function () {
x1 = $(this).val(); // refers price of product
//
tab = "<tr><td>" + result + "</td>";
tab += "<td>" + x1 + "</td>";
tab += "<td>" + x1 + " </td>";
tab += "<td><button type='button' onclick='deletePerson(this);' class='btn btn-default'> <span class='glyphicon glyphicon-remove' /></button></td>";
tab += "</tr>";
// append row html to table with id
$("#peopleTable").append(tab);
})
});
});
Insted of creating table using the while loop, if I am writting the html inside body tag than the toggle button is working but if I am creating the table using while loop the toggle button is not working not working.
<script src="../assets/js/jquery-1.10.2.min.js"></script>
<script src="../PurpleStyle/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
$('.jq_show_table').toggle(function () {
$(this).text('Hide');
$(".tab_taggle").show();
}, function () {
$(".tab_taggle").hide();
$(this).text('Show');
}
);
function GetLocations() {
$.ajax({
url: "Location.aspx/GetLocations",
type: "POST",
data: "{}",
contentType: "application/json;charset=utf-8",
dataType: "JSON",
success: function (data) { debugger; BindLocation(data.d); },
error: function (data) { BindLocation(data.d); },
});
}
function BindLocation(locationList) {
debugger;
var table = "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='table'>";
table += "<tr class='tab_head'>";
table += "<td width='7%'>User name</td>";
table += "<td width='4%'>Form</td>";
table += "<td width='13%'>Places Visited</td>";
table += "<td width='7%' align='center'>Setings</td>";
table += "</tr>";
table += "<tr>";
table += "<td valign='middle'>" + "User Name" + "</td>";
table += "<td valign='middle'>Form </td>";
table += "<td valign='middle'>Places Visited</td>";
table += "<td class='no-padding'>";
table += "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='tab_taggle'>";
table += "<tr><td width='54%'>GPS</td><td width='46%' class='off'>Off</td></tr>";
table += "<tr><td>Phone Network</td><td class='off'>Off</td></tr>";
table += "<tr><td>Auto Start</td><td class='on'>Off</td></tr>";
table += "<tr><td>Auto Start</td><td class='on'>Off</td></tr>";
table += "<tr><td>Connection</td><td class='on'>Off</td></tr>";
table += "</table>";
table += "<a class='btn btn_grey jq_show_table' href='#'>Show</a>"
table += "</td>";
table += "</tr>";
// }
table += "</table>";
$('#onTable').html(table);
}
<div class="tab_container">
<div id="tab1" class="tab_content">
<div class="heading">ON</div>
<div id="onTable"></div>
</div>
simply put, you are trying to bind the event listener to a non existing element. In order to fix it, you should set event listener after you rendered that table to #onTable div. So if i were you, i would create a function to bind the event listener like so;
var initListener = function(){
$('.jq_show_table').toggle(function () {
$(this).text('Hide');
$(".tab_taggle").show();
}, function () {
$(".tab_taggle").hide();
$(this).text('Show');
});
}
And then, between the closing tag and $('#onTable').html(table); line of BindLocation function, i would call it like: initListener();
I suggest you to change toggle to click and since your element will be added dynamically you need to have event delegation here. So make some changes as below:
$(document).ready(function () {
$('#onTable').on('click','.jq_show_table',function () {
//Event Delegation
var text=$(this).text();
//get the text of element
if(text=='Show')//if show
{
$(this).text('Hide');
$(".tab_taggle").show();
}
else //if hide
{
$(".tab_taggle").hide();
$(this).text('Show');
}
})
function BindLocation() {
debugger;
var table = "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='table'>";
table += "<tr class='tab_head'>";
table += "<td width='7%'>User name</td>";
table += "<td width='4%'>Form</td>";
table += "<td width='13%'>Places Visited</td>";
table += "<td width='7%' align='center'>Setings</td>";
table += "</tr>";
table += "<tr>";
table += "<td valign='middle'>" + "User Name" + "</td>";
table += "<td valign='middle'>Form </td>";
table += "<td valign='middle'>Places Visited</td>";
table += "<td class='no-padding'>";
table += "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='tab_taggle'>";
table += "<tr><td width='54%'>GPS</td><td width='46%' class='off'>Off</td></tr>";
table += "<tr><td>Phone Network</td><td class='off'>Off</td></tr>";
table += "<tr><td>Auto Start</td><td class='on'>Off</td></tr>";
table += "<tr><td>Auto Start</td><td class='on'>Off</td></tr>";
table += "<tr><td>Connection</td><td class='on'>Off</td></tr>";
table += "</table>";
table += "<a class='btn btn_grey jq_show_table' href='#'>Show</a>"
table += "</td>";
table += "</tr>";
// }
table += "</table>";
$('#onTable').html(table);
}
BindLocation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div class="heading">ON</div>
<div id="onTable"></div>
</div>
You need to bind the toggle part in the success of the ajax because you are binding the toggle to an element that doesn't exist in the DOM yet
function GetLocations() {
$.ajax({
url: "Location.aspx/GetLocations",
type: "POST",
data: "{}",
contentType: "application/json;charset=utf-8",
dataType: "JSON",
success: function (data) { debugger; BindLocation(data.d);
$('.jq_show_table').toggle(function () {
$(this).text('Hide');
$(".tab_taggle").show();
}, function () {
$(".tab_taggle").hide();
$(this).text('Show');
});
},
error: function (data) { BindLocation(data.d); },
});
}