Example of dynamically adding table rows or columns using jquery

Share the Code!

Html

<div class= "table-responsive" id= "bk_table" style= "Display:none"; >
<table class= "Table Table-hover table-bordered" >
<thead>
<tr>
<th>
<div class= "Out" >
<b> Plate </b>
<em> Dimension </em>
</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

JS operation is as follows:

Deletelie:function () {//delete a column
var index = $ (this). Parent (). index ();
for (var i = 0; I < $ (". Table tr"). Length; i++) {
$ ($ (". Table tr") [i]). Children (). EQ (index). Remove ();
}
if ($ (". Table tr"). Length = = 1 && $ (". Table tr"). EQ (0). Children (). length = = 1) {
$ ("#Bk_table"). Hide ();
$ (". Blankshow"). Show ();
}
},
Deleteoneline:function () {//delete row
$ (this). Parent (). Parent (). remove ();
if ($ (". Table tr"). Length = = 1 && $ (". Table tr"). EQ (0). Children (). length = = 1) {
$ ("#Bk_table"). Hide ();
$ (". Blankshow"). Show ();
}
},
Addonebk:function () {//Add a column
if ($ ("#Bk_table"). Is (": hidden")) {
$ ("#Bk_table"). Show ();
}
if ($ (". Blankshow"). Is (": visible")) {
$ (". Blankshow"). Hide ();
}
var Firstlie = ' <th class= "hovershow" ><span class= "Font_zs" style= "Display:none" > in Hong West Bank 3</span> ' +
' <input type= ' text "class=" Form-control getprevalue "placeholder=" fill in the plate name "/>" +
' <a class= ' glyphicon glyphicon-remove bkdelete delete_lie ' ></a></th> ';
$ (". Table>thead>tr"). EQ (0). append (Firstlie);
var Otherlie = ' <td><input type= ' text ' class= ' form-control ' value= ' ' placeholder= ' 1-5 number ' +
' onkeyup= ' if (isNaN (value) | | parsefloat (value) >5| | parsefloat (value) <1) execcommand (\ ' undo\ ') "' +
' Onafterpaste= ' if (isNaN (value) | | parsefloat (value) >5| | parsefloat (value) <1) execcommand (\ ' undo\ ') "/></td>";
$ (". Table>tbody>tr"). Append (Otherlie);
},
Addwd:function () {//Add one line
if ($ ("#Bk_table"). Is (": hidden")) {
$ ("#Bk_table"). Show ();
}
if ($ (". Blankshow"). Is (": visible")) {
$ (". Blankshow"). Hide ();
}
var wdhtml_1 = ' <tr> ' +
' <th scope= ' row ' class= ' hovershow ' > ' +
' <span class= ' Font_zs T1 ' style= ' Display:none ' > Dimension III </span> ' +
' <input type= ' text ' class= ' Form-control getprevalue ' placeholder= ' Fill in Dimension name '/> ' +
' <a class= ' glyphicon glyphicon-remove bkdelete deleteoneline ' ></a> ' +
' </th> ';
var wdhtml_2 = "";
var lielength = $ (". Table>thead>tr"). Children (). Length-1;
if (Lielength > 0) {
for (var i = 0; i < lielength; i++) {
wdhtml_2 = wdhtml_2 + ' <td><input type= "text" class= "Form-control" value= "" placeholder= "1-5 the number" onkeyup= "if ( isNaN (value) | | parsefloat (value) >5| | parsefloat (value) <1) execcommand (\ ' undo\ ') "onafterpaste=" if (isNaN (value) | | parsefloat (value) >5| | parsefloat (value) <1) execcommand (\ ' undo\ ') "/></td>";
}
}
var wdhtml_3 = ' </tr> ';
var allwd = wdhtml_1 + wdhtml_2 + wdhtml_3;
$ (". Table>tbody"). Append (ALLWD);
}
The above posted is part of the code, there are problems to communicate!