I am looking for a javascript plugin that will let users create MySQL tables using a very basic HTML interface. Ideally a CREATE statement would result from the HTML table. Does anyone know of such a script?
to my knowledge there is not a jquery plugin that will allow you to 'create' database tables, regardless you would still have to use some server side code to handle the actual SQL etc. it is not too difficult to create something yourself, i knocked together this which i think is the kinda thing your looking for. note: this is not a full implementation :P just an idea, basically create the table using html, parse it to json, then send it to the server to deal with it.
initial html 'template':
<table id="table_designer">
<tr class="table_name">
<td><input type="text" placeholder="table name" /></td>
</tr>
<tr class="field_name">
<td>name</td>
<td><input type="text" /></td>
</tr>
<tr class="type">
<td>type</td>
<td><select>
<option>int</option>
<option>varchar</option>
<option>date</option>
</select></td>
</tr>
<tr class="primary_key">
<td>primary key</td>
<td><input type="checkbox" /></td>
</tr>
<tr class="relationship">
<td>related type</td>
<td><select>
<option>none</option>
<option>one to many</option>
<option>many to one</option>
<option>many to many</option>
</select></td>
</tr>
<tr class="related_table">
<td>related table</td>
<td><input type="text" /></td>
</tr>
<tr class="related_field">
<td>related field</td>
<td><input type="text" /></td>
</tr>
<tr class="controls">
<td><button id="save">save</button></td>
<td>
<button id="delete">delete</button>
<button id="add">add</button>
</td>
</tr>
</table>
some jquery to handle the 'actions'
/* parses table as json and sends to server */
$('#save').click(function() {
var json= {};
$('#table_designer tr').each(function(){
var $t = $(this),
prop = $t.attr('class');
json[prop] = [];
$t.children('td').each(function() {
json[prop].push($(this).children().first().val());
});
});
alert(JSON.stringify(json, null, " "));
/* send the data to the server
$.post('www.mysite.com', json, function(d, t, j)
{ alert('success'); });
*/
});
/* deletes parent column */
$('#delete').click(function() {
var $t = $(this),
pos = $t.parents('td').index() + 1;
$('#table_designer tr').each(function(){
$(this).children('td:nth-child(' + pos +')').remove();
});
});
/* adds a new field */
$('#add').click(function() {
var $t = $(this),
pos = $t.parents('td').index() + 1;
$('#table_designer tr').each(function(){
var clone = $(this).children('td').last().clone(true);
clone.children('input').val('');
$(this).children('td:nth-child(' + pos +')').after(clone);
});
});
Related
I want to sort my checkbox when i click on the X:
JS to sort my checkbox(checked and unchecked)?
I got no idea how to write it. please help.
The following code is borrowed.
The Price and stock value will be pass from other JS file using router.
But for now I make it simple because I want to know how to sort the checkbox.
var sortedPrice = false;
function sortPrice() {
$('#myTable').append(
$('#myTable').find('tr.item').sort(function (a, b) {
var td_a = $($(a).find('td.sortPrice')[0]);
var td_b = $($(b).find('td.sortPrice')[0]);
if(sortedPrice){
if(td_a.html() == 'Free') return -1;
return td_b.html().replace(/\D/g, '') - td_a.html().replace(/\D/g, '');
}else{
if(td_a.html() == 'Free') return 1;
return td_a.html().replace(/\D/g, '') - td_b.html().replace(/\D/g, '');
}
})
);
if(sortedPrice) sortedPrice = false;
else sortedPrice = true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="myTable">
<tr>
<th onclick="sortPrice()">Price</th>
<th>Stock</th>
<th>%</th>
<th>X</th>
</tr>
<tr class="item">
<td class="sortPrice">1</td>
<td>1</td>
<td>2</td>
<td><input type="checkbox" value="1"></td>
</tr>
<tr class="item">
<td class="sortPrice">4</td>
<td>3</td>
<td>1</td>
<td><input type="checkbox" value="2"></td>
</tr>
<tr class="item">
<td class="sortPrice">7</td>
<td>4</td>
<td>6</td>
<td><input type="checkbox" value="3"></td>
</tr>
<tr class="item">
<td class="sortPrice">2</td>
<td>7</td>
<td>8</td>
<td><input type="checkbox" value="4"></td>
</tr>
<tr class="item">
<td class="sortPrice">3</td>
<td>4</td>
<td>2</td>
<td><input type="checkbox" value="5"></td>
</tr>
</table>
I would try to make the click handler generic by taking the following steps:
Create a function that takes an array of pairs, and sorts that array by the first value in every pair, and returns the sorted array with just the second value from each pair in sorted order. This generic function can be used to pass pairs of cell-content and corresponding row element. This function could also take care of reversing the order when the input pairs were already sorted.
Create a single click handler for the td elements (the column headers). Let it collect the cells in the corresponding column, and for each cell determine whether the checkbox state should be taken as value, or the text content of that cell.
After sorting the values in the column with the first function, the rows can be fed into the table again.
Use the compare function from Intl.Collator so to have numeric sort when appropriate.
This way you can do away with some of the HTML (onclick, sortPrice, item, ...)
const {compare} = new Intl.Collator(undefined, {numeric: true});
function sortSecondByFirst(pairs) {
const sorted = [...pairs].sort(([a], [b]) => compare(a, b))
.map(([,a]) => a);
if (pairs.every(([,a], i) => a === sorted[i])) {
sorted.reverse(); // Was already sorted
}
return sorted;
}
$("th", "#myTable").click(function () {
sortColumn($(this).index());
});
function sortColumn(colIdx) {
const $cells = $(`tr > td:nth-child(${colIdx+1})`, "#myTable");
$("#myTable").append(
sortSecondByFirst($cells.get().map((cell) => {
const $input = $('input[type=checkbox]', cell);
const value = $input.length ? $input.prop("checked") : $(cell).text();
return [
value,
$(cell).parent()
];
}))
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>Price</th><th>Stock</th><th>%</th><th>X</th>
</tr>
<tr>
<td>1</td><td>1</td><td>2</td>
<td><input type="checkbox" value="1"></td>
</tr>
<tr>
<td>4</td><td>3</td><td>1</td>
<td><input type="checkbox" value="2"></td>
</tr>
<tr>
<td>7</td><td>4</td><td>6</td>
<td><input type="checkbox" value="3"></td>
</tr>
<tr>
<td>20</td><td>7</td><td>8</td>
<td><input type="checkbox" value="4"></td>
</tr>
<tr>
<td>3</td><td>4</td><td>2</td>
<td><input type="checkbox" value="5"></td>
</tr>
</table>
Quite honestly if u have a choice I'd always go use Vue, react or the like as a ui framework. There this is simpler and u have a better -in my eyes - split of html template and data. Vue is quite easy to learn from my experience too.(great tutorials eg on YouTube)
That said in jQuery I guess I would write a sort function like the one u got there that via onclick event it triggered when X is clicked on and for the sorting write a similar compare function as above. Eg
(a,b) => a.checked - b.checked;
Hope this makes sense to you or where precisely do u struggle?
I would like to ask for you help. I am currently having a problem in select2/jquery. I've been solving this for 1 day now.
Here is the scenario:
Inventory Table
I have a customer code and a customer name field(select2).
I can type on the customer code field, and once I selected a customer code, the customer name field will be automatically filled out.
The same with the customer name field, If I selected a customer name, the customer code field will be filled out.
Now, I already got it working. The problem is, I have a code that will automatically fill each field. But what happens is, it seems that if I change the customer name field, it will fill out the customer code field, and it will trigger again to change the customer name field, and it goes on and on. They keep on changing each other. Like a never ending loop.
My question is, how can I trigger it only once, so it would not continue in a loop.
If I change the customer code field, it would fill out the customer name field. Stop.
If I change the customer name field, it would fill out the customer code field. Stop.
Hoping for you guidance. Thank you everyone. Here is my code:
$('body').on('select2:select', '.select-customer-code', function (e) {
var data = e.params.data;
var customer_code = data.id;
var parent = $(this);
/** Load Ajax */
ajax_loader(baseUrl + 'merchandiser/inventory/manual/customer/info/fetch', {
customer_code: customer_code
}).done(function (response) {
var response = $.parseJSON(response);
var el = parent.parent().parent('tr').find('.select-customer-name');
/** Load select2 */
select2_loader_plain(el, customer_name_url);
el.select2('trigger', 'select', {
data: {
id: response.customer_code,
text: response.customer_name
}
});
});
});
$('body').on('select2:select', '.select-customer-name', function (e) {
var data = e.params.data;
var parent = $(this);
var el = parent.parent().parent('tr').find('.select-customer-code');
el.select2('trigger', 'select', {
data: {
id: data.id,
text: data.id
}
});
});
EDIT: (ADDED THE HTML MARKUP)
<table width="100%" class="table table-condensed">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>#</th>
<th>Customer Code</th>
<th>Customer Name</th>
<th>Inventory Date</th>
<th>Material Code</th>
<th>Material Description</th>
<th>UOM</th>
<th>QTY</th>
<th>Batch</th>
<th>Reported By</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td><select class="form-control form-select select-customer-code"></select></td>
<td><select class="form-control form-select select-customer-name"></select></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td>
<select name="" id="" class="form-control">
<option value=""></option>
</select>
</td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td><select class="form-control form-select select-customer-code"></select></td>
<td><select class="form-control form-select select-customer-name"></select></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td>
<select name="" id="" class="form-control">
<option value=""></option>
</select>
</td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
</tr>
</tbody>
</table>
EDIT 2: SOLUTION (answered by Tom Jenkins)
var code_lock = false;
$('.select-customer-code').on('select2:select', function (e) {
var data = e.params.data;
var customer_code = data.id;
var customer_name = $('.select-customer-name');
if (!code_lock) {
/** Load Ajax */
ajax_loader(baseUrl + 'merchandiser/inventory/manual/customer/info/fetch', {
customer_code: customer_code
}).done(function (response) {
var response = $.parseJSON(response);
customer_name.select2('trigger', 'select', {
data: {
id: response.customer_code,
text: response.customer_name
}
});
});
}
});
$('.select-customer-name').on('select2:select', function (e) {
var data = e.params.data;
var parent = $(this);
var customer_code = $('.select-customer-code');
customer_code.select2('trigger', 'select', {
data: {
id: data.id,
text: data.id
}
});
code_lock = true;
setTimeout(function () {
code_lock = false;
}, 1000);
});
What if you were to add a global variable called recentlyChanged then before you make a change, you check to see if it was recently changed. If it was recently changed, you do not make the changes. If it was not recently changed, set the global variable to show it was recently changed, and use setTimeout to delay changing it back to not being recently changed. Does that make sense?
I have a table which looks like below and i want to get all values inside the table including the value of text box and check box.
<div class="container-fluid">
<h1 class="h3 mb-4 text-gray-800"><?= $title; ?></h1>
<div class="container" style="text-align: left">
<table class="table table-sm" id="tbl">
<thead>
<tr>
<th>No</th>
<th>Checklist Item</th>
<th>Cheklist</th>
<th>Actual</th>
<th>Recomended</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Check and clean rubber roller cage</td>
<td><input type="checkbox" name="chek" id="check"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td scope="row">2</td>
<td>Tension Rod all </td>
<td><input type="checkbox" name="chek" id="check"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td scope="row">3</td>
<td>Delete all unnecessary file from system</td>
<td><input type="checkbox" name="chek" id="check"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
save
</div>
when i grab all value using this script i cant get value inside the text box and checkbox
$(document).on('click', '#save', function() {
var myRows = [];
var headersText = [];
var $headers = $("th");
// Loop through grabbing everything
var $rows = $("tbody tr").each(function(index) {
$cells = $(this).find("td");
myRows[index] = {};
$cells.each(function(cellIndex) {
// Set the header text
if (headersText[cellIndex] === undefined) {
headersText[cellIndex] = $($headers[cellIndex]).text();
}
// Update the row object with the header/cell combo
myRows[index][headersText[cellIndex]] = $(this).text();
});
});
var myObj = {
"Array": myRows
};
alert(JSON.stringify(myObj));
});
I want to convert it to JSON but the value of text box and check box not shows inside table. Kindly help me to resolve this issue.
Thank you in advance.
You can find the input and use .val() to get its value if the table cell's text is empty. Checkboxes and text inputs will need to be handled separately.
const text = $(this).text();
if(text){
myRows[index][headersText[cellIndex]] = text;
} else {
const input = $(this).find('input');
if(input.is(":checkbox")){
myRows[index][headersText[cellIndex]] = +input.prop('checked');
} else {
myRows[index][headersText[cellIndex]] = input.val();
}
}
I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.
This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":
while($personsArrayLength>2){
echo '
<script>
$(document).ready(function(){
var i = 2;
var rowTemplate2 = jQuery.format($("#template2").html());
rowTemplate2.value = "xx";
addRow2();
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
});
</script>
';
Here is html for that:
function addRows2(){
global $personsError_css;
$personsArray = $_POST['persons'];
JB_var_dump($_POST['whichRow']);
$html = '<table id="template2" align="right" style="display:none; ">
<tr id="row_{0}">
<td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
<td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
</tr>
</table>
<table id="list2" style="margin-left:200px;">
<thead >
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="app_here2"></td>
</tr>
</tbody>
</table>';
return $html;
}
This is properly filled form
In this epty fields I want to add values "xx"
Sorry for my english.
How can i set values in added rows? What i should change in my code?
Thanks for help.
Change your 'addRow2' to this:
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
//UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
$("#template2").find("input:empty").val("xx");; // added this row
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
Edit: I have solved this by myself. See my answer below
I have set up a nice sortable table with jQuery and it is quite nice. But now i want to extend it.
Each table row has a text box, and i want i am after is to, every time a row is dropped, the text boxes update to reflect the order of the text boxes. E.g. The text box up the top always has the value of '1', the second is always '2' and so on.
I am using jQuery and the Table Drag and Drop JQuery plugin
Code
Javascript:
<script type = "text/javascript" >
$(document).ready(function () {
$("#table-2").tableDnD({
onDrop: function (table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Order: ";
for (var i = 0; i < rows.length; i++) {
debugStr += rows[i].id + ", ";
}
console.log(debugStr)
document.forms['productform'].sort1.value = debugStr;
document.forms['productform'].sort2.value = debugStr;
document.forms['productform'].sort3.value = debugStr;
document.forms['productform'].sort4.value = debugStr;
},
});
});
</script>
HTML Table:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr>
<td>Product</td>
<td>Order</td>
</tr>
</thead>
<tbody>
<tr class="row1" id="Pol">
<td>Pol</td>
<td><input type="textbox" name="sort1"/></td>
</tr>
<tr class="row2" id="Evo">
<td>Evo</td>
<td><input type="textbox" name="sort2"/></td>
</tr>
<tr class="row3" id="Kal">
<td>Kal</td>
<td><input type="textbox" name="sort3"/></td>
</tr>
<tr class="row4" id="Lok">
<td>Lok</td>
<td><input type="textbox" name="sort4"/></td>
</tr>
</tbody>
</table>
</form>
Hardnrg in #jquery ended up solving it for me.
It involved adding an id="" to each input:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr><td>Product</td> <td>Order</td></tr>
</thead>
<tbody>
<tr class="row1" id="Pol"> <td>Pol</td> <td><input id="Pol_field" type="textbox" name="sort1"/></td> </tr>
<tr class="row2" id="Evo"> <td>Evo</td> <td><input id="Evo_field" type="textbox" name="sort2"/></td> </tr>
<tr class="row3" id="Kal"> <td>Kal</td> <td><input id="Kal_field" type="textbox" name="sort3"/></td> </tr>
<tr class="row4" id="Lok"> <td>Lok</td> <td><input id="Lok_field" type="textbox" name="sort4"/></td> </tr>
</tbody>
</table>
</form>
And add this js to the OnDrop event:
for (var i=0; i < rows.length; i++) {
$('#' + rows[i].id + "_field").val(i+1);
}
Easy peasy!
Hmmm..
I think you want to do something like this:
$("input:text", "#table-2").each( function(i){ this.value=i+1; });
The $().each() function's info is here: http://docs.jquery.com/Core/each