Dynamically Built Jquery Table Assigning Row Data to Variables - javascript

I have a table built dynamically in my view, I populated a table with values from a jquery popup modal dialog. What i am trying to accomplish is getting each cell in the row and assigning it to variable, at which point I am going to post the data to the database via an ajax call
I am fairly new to JS and jnquery and following many examples, I cant seem to figure out to assign the cell values to the variable, I have included the code below.
Here is the html for the table
<div class="row">
<div class="col-md-12">
<table id="myTest" class="table table-responsive">
<thead>
<tr>
<th>Sku Number</th>
<th>Product Name</th>
<th style="width:300px">Description</th>
<th>Quantity</th>
<th>Border</th>
<th>Ink Color</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="padding:10px 0; text-align: right; ">
<input id="submit" type="button" value="Save Order" class="btn btn-warning" style="padding: 10px 20px; margin-right: 15px;" />
</div>
</div>
Here is the JS for populating the table
function addItem() {
var remove = $('<input type="button" id="remove" value="remove" style="width:80px" class="btn btn-danger" />');
var td = $("<td></td>");
td.append(remove);
var valid = true;
allFields.removeClass("ui-state-error");
if (valid) {
$("#myTest tbody").append(
"<tr>" +
"<td>" + skuNumber.val() + "</td>" +
"<td>" + productName.val() + "</td>" +
"<td>" + description.val() + "</td>" +
"<td>" + quantity.val() + "</td>" +
"<td>" + border.val() + "</td>" +
"<td>" + inkColor.val() + "</td>" +
"</tr>");
dialog.dialog("close");
$("#myTest > tbody tr:last").append(td);
//console.log(td);
}
return valid;
}
And when you hit the submit button I want to create a list of objects that contains each row in the table, and this is where I am having problems.
$("#submit").click(function () {
var isAllValid = true;
var list = [];
$("#myTest tbody tr td")
.each(function(index, ele) {
var orderItem = {
SkuNumber: skuNumber.val(),
ProductName: productName.val(),
Description: description.val(),
Quantity: quantity.val(),
Border: border.val(),
InkColor: inkColor.val()
};
list.push(orderItem);
console.log(orderItem);
});

Related

How can I delete all the columns in the Dynamic DataTable?

First, I want to delete all the columns and then use the select command to bring all the columns back for perform the refresh operation on the DataTable without refreshing page. So I need a piece of code that I can delete all the columns.
I shared my html and javascript code as shown following.
Can someone help me about this regard?
//CSHTML
<table id="datatables" class="table table-striped table-no-bordered table-bigboy" cellspacing="0" style="width:100%;">
<thead>
<tr>
<th class="disabled-sorting">Room Plan</th>
<th>Name</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Room Plan</th>
<th>Name</th>
<th class="text-right">Actions</th>
</tr>
</tfoot>
<tbody id="colmn">
#* *#
</tbody>
</table>
//*********************************JS*********************************//
//-------------------------SELECT ROOM START----------------------------
$.post("/Home/selectRooms", {}, function (data) {
var ndx = 0;
$.each(data.xroom_name, function (key, value) {
var Xroom_name = data.xroom_name[ndx];
var Xroom_plan = data.xroom_plan[ndx];
var column =
('<tr>' +
'<td>' +
'<div class="img-container">' +
'<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
'</div>' +
'</td>' +
'<td id="imgname">' + Xroom_name + '</td>' +
'<td class="text-right">' +
'<i class="fa fa-edit"></i>' +
'</i>' +
'</td>' +
'</tr>');
document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;
ndx++;
});
});
I also delete the column information that I clicked like this:
var table = $('#datatables').DataTable();
table.on('click', '.remove', function (e) {
$tr = $(this).closest('tr');
table.row($tr).remove().draw();
e.preventDefault();
});
I want to delete all columns because of I can refresh the table immediately after adding, updating and deleting. I do not want to delete the column that I clicked only.

Trying to bind column dynamically in a table using jquery

I am trying to bind column dynamically in a table using jQuery .but click event is not working while trying to click 'btnASizeR' and 'btnWdDelete' button event is not working .Any idea would be appreciated.
$(function() {
var i = 0;
$('#btnASizeR').click(function() {
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var i = $("#WireDimTbl tbody>tr").length + 1;
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' name='SizeMin' value='2.00' />";
var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' name='SizeMax' value='3.00' />";
var ToleranceMin = "<input type='text' ID='TolMin" + i + "' name='TolMin' value='1' />";
var ToleranceMax = "<input type='text' ID='TolMax" + i + "' name='TolMax' value='1' />";
var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
$("#WireDimTbl tbody").append(markup);
});
$('#btnWdDelete').click(function() {
$("#WireDimTbl tbody>tr:last").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class='text-left'><strong>Wire Dimensions</strong></td>
</tr>
<tr>
<td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
<td>
<input type="button" id="btnASizeR" value="AddSizeRange" />
<input type="button" id="btnWdDelete" value="Delete" />
<table id="WireDimTbl" class="table table-bordered">
<thead>
<tr>
<th class="text-center">Size Range Min (mm)</th>
<th class="text-center">Size Range Max (mm)</th>
<th class="text-center">Tolerance (-)mm</th>
<th class="text-center">Tolerance (+) mm</th>
</tr>
</thead>
<tbody></tbody>
</table>
</td>
</tr>
You mentioned that you are loading the table dynamically. Do you mean that when the page first loads the table is missing and its added later?
If that is the case, are you sure the code is called that binds the click events? The above example binds the events on page_load however, if the buttons are not yet available on the page it won't be able to bind it. JQuery will not automatically bind future elements.
Try settings a console.log($('#btnASizeR')); before binding the click event to make sure that JQuery can actually find the button.

How to create webgrid or table for my data

This is my html codes
<table>
<tr>
<td><label style="text-align:left">Cari Kod:</label></td>
<td><input type="text" id="cariKod" value="" /> </td>
</tr>
<tr>
<td> <label style="text-align:left">Cari İsim:</label></td>
<td><textarea rows="4" id="cariAd" cols="50" name="comment" form="usrform"></textarea></td>
</tr>
<tr>
<td><label style="text-align:left">Adres:</label></td>
<td><textarea rows="4" id="Adress" cols="50" name="comment" form="usrform"></textarea></td>
</tr>
<td><button id="btn1" />Okey</td>
</table>
This is my jquery codes
<script>
$(document).ready(function () {
$('#myform input').on('change', function () {
$("#btn1").click(function () {
var sonuc = ($("#cariKod").val() + $("#cariAd").val() + $("#Adress").val());
console.log(sonuc);
})
})
});
</script>
ı want to do a table or webgrid for my data input help pls.
You must to write something like this
HTML
<div id="tableResult"></div>
JAVASCRIPT - JQUERY
var table = "<table>",
tableEnd = "</table>"
$("#btn1").click(function () {
table += "<tr><td>"+$("#cariKod").val() + "</td></tr>"
table += "<tr><td>"+$("#cariAd").val() + "</td></tr>"
table += "<tr><td>"+$("#Adress").val() + "</td></tr>"
table += tableEnd;
$("#tableResult").html(table)
})
<fieldset>
<table id="dinamiktablo">
<tr>
<td>
<div id="tableResult"></div>
</td>
</tr>
tr += "<tr>";
tr += "<td>" + $("#cariKod").val() + "</td>"
tr += "<td>" + $("#cariAd").val() + "</td>"
tr += "<td>" + $("#Adress").val() + "</td>"
tr += "</tr>";
$("#dinamiktablo").append(tr)
its fixed

Foo Table its not working startly phone screensize

I using footable plugin for my projects.
But ,Its not working startly with phone screen.
Firstly i change screen size from chrome developer tools its workly fine like this,
but its not working when my codes rework on the phone screen.so like this
My html code ;
<div id="tablelistDiv">
<div class="row">
<table id="tbl_search" class="footable" data-page-size="20">
<thead>
<tr>
<th data-toggle="true" data-sort-ignore="false">Sıra No</th>
<th data-sort-ignore="false">Ünvan</th>
<th data-hide="phone" data-sort-ignore="false">Şube</th>
<th data-hide="phone" data-sort-ignore="false">Broker</th>
<th data-hide="phone" data-sort-ignore="false">Durum</th>
<th data-hide="phone" data-sort-ignore="false">Kayıt Tar.</th>
<th data-hide="phone" data-sort-ignore="true"><i class="fa fa-search"></i></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="7">
<div class="pagination pagination-centered hide-if-no-paging"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
My Js Code is,
function detayKayitlar(jsondata, status) {
obj = JSON.parse(jsondata);
var tableHtml = "";
for (var i = 0; i < obj.length; i++) {
tableHtml = tableHtml
+ "<tr>"
+ "<td>" + obj[i].ID + "</td>"
+ "<td>" + obj[i].UNVAN + "</td>"
+ "<td>" + obj[i].SUBE + "</td>"
+ "<td>" + obj[i].BROKER + "</td>"
+ "<td>" + obj[i].USERLASMA + "</td>"
+ "<td>" + obj[i].KAYITTAR + "</td>"
+ "<td><button onclick='detayKayit(" + obj[i].ID + ",2);' class='btn btn-block btn-danger' type='button'><i class='fa fa-search'></button></td>"
+ "</tr>";
}
$("#tbl_search tbody").append(tableHtml);
jQuery(function () {
jQuery('#tbl_search').footable();
});
pWaitHide();
hideDiv('search');
showDiv('list');
}
Since your chrome is in desktop, it is working fine. Please check weather you have added the below line in your header tag or not. This view port will detect the screensize.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
what do you mean with rework? if you doing something dynamically you
can run $('#tbl_search').trigger('footable_redraw');
from #Almis on first row comment.
Thank you

jQuery: How to update row number when first row added?

I've a table like this:
<table class="table table-striped table-bordered table-hover table-condensed" id="table">
<tr>
<td>rowNumber</td>
<td>Product Name</td>
<td>Price</td>
</tr>
<tr>
<td>1</td>
<td>item1</td>
<td>250000</td>
</tr>
<tr>
<td>2</td>
<td>item2</td>
<td>250000</td>
</tr>
</table>
I also adding new row this way (data will be adding to table when new record added):
if ($('#table').length) {
$('#table tr:first').after("<tr>" +
"<td>" + ? + "</td>" +
"<td>" + data.Title + "</td>" +
"<td>" + data.Price + "</td>" +
"</tr>");
}
As you can see, I add new row to the first row of the table. Now I want to add new row with rowNumber 1 then all other rowNumber get update.
Any idea?
Once you have appended the new row, you can set the rowNumber going through all rows (except the first one):
if ($('#table').length) {
$('#table tr:first').after("<tr>" +
"<td></td>" +
"<td>" + data.Title + "</td>" +
"<td>" + data.Price + "</td>" +
"</tr>");
$("#table tr:not(:first-child) td:first-child").each(function(index,item){
$(this).text(index+1);
});
}
Fiddle

Categories

Resources