In my case, my HTML and javascript:
$('.addRow').on('click', function() {
addRow();
});
function addRow() {
var tr = '<tr>' +
'<td></td>' +
'</tr>';
$('tbody').append(tr);
};
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center"><i class="glyphicon glyphicon-plus"></i></th>
</thead>
</table>
I want to make it like this
1.
2.
3.
............
You can use css counters for this
check the following code snippet
$('.addRow').on('click', function() {
addRow();
});
function addRow() {
var tr = '<tr>' +
'<td>hello</td>' +
'</tr>';
$('table tbody').append(tr);
};
tbody {
counter-reset: row;
/* Set the row counter to 0 */
}
tbody tr::before {
counter-increment: row;
/* Increment the row counter*/
content: counter(row) ": ";
/* Display the row */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center">AddRow</th>
</thead>
<tbody></tbody>
</table>
Try this:
var i = 1;
function addRow() {
var tr = '<tr>' +
'<td>' + i + '.</td>' +
'</tr>';
$('tbody').append(tr);
i++;
};
Define a variable (i in the example below) outside of the function and then increment the variable after each append.
var i = 1;
$('.addRow').on('click', function() {
addRow();
});
function addRow() {
var tr ='<tr>'+
'<td>'+ i +'.</td>'+
'</tr>';
$('tbody').append(tr);
i++;
};
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center"><i class="glyphicon glyphicon-plus"></i></th>
</thead>
<tbody></tbody>
</table>
Your html, you need to add tbody
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center">
<i class="glyphicon glyphicon-plus"></i>
</th>
</thead>
<tbody>
</tbody>
</table>
and then your script:
$('.addRow').on('click', function() {
addRow();
});
//Define row number
var rowNum = 1;
function addRow() {
var tr = '<tr>' + '<td>' + rowNum + '</td>' + '</tr>';
$('tbody').append(tr);
rowNum++;
};
Here's a working example: https://jsfiddle.net/o46asuyb/1/
You'll want to have a global variable to keep track of the row you're currently at:
var row = 1;
function addRow() {
var tr='<tr>'+
'<td>'+ (row) + '. </td>'+
'</tr>';
row++;
$('tbody').append(tr);
}
$('.addRow').on('click', function() {
addRow();
});
You have two problems with your code. First, you don't actually have a <tbody> element, so you have nothing to append to. Second, you need to use a loop that will increase the number to display.
Here's a working sample:
$('.addRow').on('click', function() {
addRow();
});
var i = 1;
function addRow() {
var tr = '<tr>' +
'<td>' + i + '</td>' +
'</tr>';
$('tbody').append(tr);
i++;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
<thead>
<th>No.</th>
<th style="text-align:center">Add Row</th>
</thead>
<tbody>
</tbody>
</table>
Hope this helps! :)
Related
this link image shows my data shown on a table from TCP server data is coming from socket.io and it shows in a table dynamically I want to edit that table values and send back through TCP
I want when the table input is clicked input tag is editable and then send back to TCP through socket
const net = require('net');
const client = new net.Socket();
client.connect(4000, '127.0.0.1', function() {
console.log('Connected to server .....');
});
client.setEncoding('utf8');
client.on('data', function(data) {
var strTable = "";
for(var i = 0; i < logReceived(data).length; i++) {
strTable += "<tr>"
for(var j = 0; j < logReceived(data)[i].length; j++) {
// console.log("in loop",logReceived(data)[i])
strTable += "<td>";
strTable += "<input type='number' class='form-control' value='"+logReceived(data)[i][j]+"'/>"
// strTable += logReceived(data)[i][j];
strTable += "</td>";
}
strTable += "</tr>";
}
$('#model_table').html(strTable);
});
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
</tr>
</thead>
<tbody id="model_table">
</tbody>
</table>
I think all things are working fine but maybe you forgot syntax for dynamic html.
Please replace below code.
strTable += "<input type=\"number\" class=\"form-control\" value=\""+logReceived(data)[i][j]+"\">"
Please check and let me know if any issue.
You are adding table rows and cells with static text, then you have not any control of them
This is sample code I tried successfull
<!DOCTYPE html>
<html>
<head>
<script src="/media/js/jquery.min.js"></script>
<link rel="stylesheet" href="/media/css/bootstrap.min.css">
<script src="/media/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<input style="width: 100%" id="myresult"/>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
</tr>
</thead>
<tbody id="model_table"></tbody>
</table>
</body>
<script language="javascript">
$(document).ready(function(e) {
for (var i = 0; i < 10; i++) {
var strrow = $("<tr></tr>");
for (var j = 0; j < 8; j++) {
// console.log("in loop",logReceived(data)[i])
var strcol = $("<td></td>");
var myinput = $("<input type='number'></input>");
myinput.data("data-i", i);
myinput.data("data-j", j);
myinput.addClass('form-control').val(i + j);
myinput[0].onchange = function(ew){
var i1 = $(this).data('data-i');
var j1 = $(this).data('data-j');
var val = $(this).val();
$("#myresult").val(i1 + " , " + j1 + " , " + val);
};
strcol.append(myinput);
strrow.append(strcol);
}
$('#model_table').append(strrow);
}
});
</script>
</html>
I have designed a table with headers. I am appending dynamic rows <tr> to this table. While appending I am losing the order of the rows. Any suggestion or ideas as to how can I solve this problem? Thanks in advance.
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
-- dynamic rows will come.
</table>
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable').append(html1);
$('#myTable').append(html2);
$('#myTable').append(html3);
Desired Output :
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tr id="1">
<td>aaa</td>
<td>aaa</td>
</tr>
<tr id="2">
<td>ccc</td>
<td>ccc</td>
</tr>
<tr id="3">
<td>bbb</td>
<td>bbb</td>
</tr>
</table>
This you will do. Add a sorting function and then call that function as described in below link.
Added snippet based on Jquery content sorting link:- https://www.shift8web.ca/2017/01/use-jquery-sort-reorganize-content/
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable').append(html1);
$('#myTable').append(html2);
$('#myTable').append(html3);
var i;
var htmlcontent = $('#myTable').html();
$('#myTableOriginalContent ').html( $('#myTable').html())
sortMeBy('id', 'myTable', 'tr', 'asc')
function sortMeBy(arg, sel, elem, order) {
var $selector = $('#'+sel),
$element = $selector.children(elem);
$element.sort(function(a, b) {
var an = parseInt(a.getAttribute(arg)),
bn = parseInt(b.getAttribute(arg));
if (order == "asc") {
if (an > bn)
return 1;
if (an < bn)
return -1;
} else if (order == "desc") {
if (an < bn)
return 1;
if (an > bn)
return -1;
}
return 0;
});
$element.detach().appendTo($selector);
}
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Original Content
<table id="myTableOriginalContent">
<thead>
<tr><td></td></tr>
<tr>
<th><span>Name</span></th>
<th><span>Description</span></th>
</tr>
</thead>
</table>
Desired Result
<table id="myTable">
<thead>
<tr><td></td></tr>
<tr>
<th><span>Name</span></th>
<th><span>Description</span></th>
</tr>
</thead>
</table>
</body>
</html>
Change $('#myTable').append(html3); to $(html3).insertAfter('#1'). Also note that you'll need a tbody element after the thead to contain your rows, but I would imagine the browser will be inserting one for you automatically. Try this:
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>';
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>';
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>';
$('#myTable tbody').append(html1).append(html2);
$(html3).insertAfter('#1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<td></td>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody></tbody>
</table>
The logic is you append all dynamic table rows then reorder them based on the attribute of the id.
Sorting code source: Using jquery, how do you reorder rows in a table based on a TR attribute?
I just modified it a little.
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
var html4 = '<tr id="5"><td>5th</td><td>5th</td></tr>'; // This should go to 5th position.
var html5 = '<tr id="4"><td>4th</td><td>4th</td></tr>'; // This should go to 4th position.
$('#myTable tbody').append(html1);
$('#myTable tbody').append(html2);
$('#myTable tbody').append(html3);
$('#myTable tbody').append(html4);
$('#myTable tbody').append(html5);
var $table=$('#myTable');
var rows = $table.find('tr').get();
rows.sort(function(a, b) {
var keyA = $(a).attr('id');
var keyB = $(b).attr('id');
if (keyA > keyB) return 1;
if (keyA < keyB) return -1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Simple just you are calling wrong way call this way
$('#myTable').append(html1);
$('#myTable').append(html3);
$('#myTable').append(html2);
Complete Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
</table>
</body>
</html>
<script type="text/javascript">
$( document ).ready(function() {
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>';
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>';
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>';
$('#myTable thead').after(html1,html3,html2);
});
</script>
Try Following
Add <tbody> in table & append rows
var html1 = '<tr id="1"><td>aaa</td><td>aaa</td></tr>'; // This position is fine
var html2 = '<tr id="3"><td>bbb</td><td>bbb</td></tr>'; // This one is having id '3', it should go to 3rd position. when 2nd comes.
var html3 = '<tr id="2"><td>ccc</td><td>ccc</td></tr>'; // This should go to 2nd position.
$('#myTable tbody').append(html1);
$('#myTable tbody').append(html2);
$('#myTable tbody').append(html3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr><td></td></tr><tr>
<th>Name</span></th>
<th>Description</span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
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.
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);
});
I am trying to fill html table(my table got 3 columns) with data from json using javascript but the data never get filled using div method! could any tell me how to fill content of table rows using without using div ?
for(i in json)
{
var div = "<tr id=\""+i+"\">\n" +
"<td>"+i+"</td>\n" +
"<td><img src=\""+ json[i].thumb +"\" height=\"42\" width=\"42\"></td>\n" +
"<td>\n" +
"" + json[i].title + "<br> \n" +
"<br></td></tr>\n\n";
$("#myDiv").append(div);
}
Table to be filled:
<table id="list" cellspacing="0" border="1">
<tr>
<th>Item#</th>
<th>Logo</th>
<th>Description</th>
</tr>
<div id='myDiv'></div>
</table>
This Your new table:
<table id="list" cellspacing="0" border="1">
<thead>
<tr>
<th>Item#</th>
<th>Logo</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And code:
var html = '';
for(var i in json)
{
html += '<tr id="'+i+'">';
html += '<td>'+i+'</td>';
html += '<td><img src="'+json[i].thumb+'" height="42" width="42"></td>';
html += "<td>";
html += "" + json[i].title + "<br/><br/>";
html += '</td>';
html += '</tr>';
}
$('#list > tbody').html(html);