Adding row in html table using select box [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I wish to make an html table with a select box below the table. If you select an option from the select box it gets added in the table with no duplicate entries. Also the select box needs to be properly formatted.
What I am looking for is to be able to fetch data into the option column with proper tabular formatting as seen in the image. Length of the words should not change the formatting which is not possible to achieve by adding white spaces.
#Tarekis posted an answer with the jsFiddle . Though it solved majority of my problem, the formatting part is still a problem.

Okay here's the thing.
When you change your option you have to go trough a couple of things.
First you get the Data of the Option and make it in a Array.
// Select the text of the chosen option
var text = $(this).children(":selected").html();
// Create a regex to split the string
var regex = new RegExp(" *");
// Make an array out of the string
// The cleanArray() function is in the JSFiddle
var array = cleanArray(text.split(regex));
Now you have an Array of the Values you want to add.
Next step is to create the HTML you want to add to your tbody.
// Create a new <tr> to append to the tbody
var newRowHTML = "<tr>";
$.each(array,function(){
newRowHTML += "<td>"+this+"</td>";
});
newRowHTML += "<tr>";
Now loop trough your td's and see if the ID of the Option you clicked is alreay there.
var alreadyInTable = false;
$.each($("tbody tr > td:first-child"),function(){
if(array[0] == $(this).html()){
// If this ID is alreay in the table set the bool to true
alreadyInTable = true;
}
});
And add the HTML.
if(alreadyInTable == false){
$("tbody #select").before(newRowHTML);
}
Important Notes: If you do not read and apply these dependencies the code will not work!
To use this you cannot have any whitespaces or new lines in your option. This means it has to look like:
<option>thecompletetextwithoutanywhitespacesbetweenthedata</option>
Also you have to add id="select" to the tr containing the select, as it is the one after where you display your data, so you can use $("tbody #select").before(newRowHTML) as shown before.
You have to make the "+ Add new Line" selected as you can see in the Fiddle's HTML, since the new Rows only get added on a change of the select, so you cannot just click the row you have already selected as it does not change which one you have selected.
And here is a complete JSFiddle!

$('#my-select-element').change(function(){
// here goes the code to append a <tr></tr> element to the table
});

Related

Advanced table filtre using js

I am a newcomer and I need some help with a js code.
I want to create a tabel filter like https://www.w3schools.com/howto/howto_js_filter_table.asp .
The script works almost perfect.
On the first 3 columns the filter work perfect, what I want more is that on the last 2 columns when you search for a dimension or code I want to display only the matched value, not all of product values.
To explain the table a bit:
Is an 5 columns table, where some of the first 3 columns have rowspan attribute because is same product but with different dimensions and codes.
If I search on dimension input the value "70" the script output all the products where is found the value 70 with all dimensions, but i want to display only the value requested and hide other values that does not meet the request ( currently it displays 170 as well as 210 values, but I need to display only the 170 values.)
I put the link for the code here: https://jsfiddle.net/mitza_dragan/vg9e0fkr/3/
Part of my js code below:
if(inp.id === "my" + cell.className) {
// Daca se gaseste valoarea din input in valoare din celula,
// seteaza seteaza true (s-a gasit macar o valoare in tot randul)
if(matchedCellText.indexOf(inp.value.toLowerCase()) > -1) {
matched = true;
// Daca s-a gasit macar un match, sari peste restul celulelor
// din randul actual
break;
}
}
For the complet view of the app follow the link above.
Thanks.
Welcome to StackOverflow :)
Thanks for sharing a working JS fiddle. I tried working on the fiddle and came up with a solution, can you check this fiddle and let me know whether it works out for you as per your requirements?
I'll explain the approach followed:
First of all, as the last two columns are a little bit different, you'll have to treat them separately. So, in case the search fields of the last two columns are not empty, we will not break out of all the loops and hide the entire row, instead we will loop through until all the cells are checked and then hide the miniRow or the entire row.
We can check whether mydimensiune or mycod inputs are empty of not by the following line of code :
const isDimensiuneOrCodSearchInput = nonEmptySearchInputs.findIndex( (input) => {
return (input.id == "mydimensiune" || input.id == "mycod")
});
If isDimensiuneOrCodSearchInput is -1 then both the 4th and 5th column search fields are empty and we need not worry about showing/ hiding any miniRow. This is where your code is working perfectly fine for the first three columns.
If isDimensiuneOrCodSearchInput is not -1, then either of the 4th or 5th column search fields are not empty and we need to check whether we should show/ hide the miniRow based on the cell value match.
Inside the miniRows for loop, a new variable has been introduced called as isHideMiniRow which would determine whether the current miniRow should be hidden or not.
Inside the cells for loop, if the cell value doesn't match with the input value, an if block has been added
if( cell.className == "dimensiune" || cell.className == "cod" ) {
isHideMiniRow = true;
}
This block sets the isHideMiniRow to true and in the miniRow for loop we check for this variable and hide the miniRow if none of the search fields match.
Also, we'll have to again show the miniRows when backspace is pressed, so the following lines of code has been added to do that :
const tableRows = document.querySelectorAll("tbody.table-row>tr");
tableRows.forEach(tableRow => tableRow.style.display = "table-row");
I've tried my best to describe the changes done to the code. Let me know if you want further clarity in the above approach.

jQuery/Javascript Default Choices for Dropdown in Qualtrics

I have the following side-by-side question in Qualtrics.
Picture of question
The dropdown menu in has the same four statements as presented in the Statement Choices and 'Dummy Column'. I am trying to get the default choice for the dropdown to be the value in the 'Dummy Column'.
Using the following code, I can get the dropdown value to equal the Statement Choice column:
// Default Choice
var $embedded = [];
var $length = $jq(".SBS2 select").length;
for (var i=0;i<$length-1;i++)
{
$embedded[i] = $jq(".Choice .c1").eq(i).text().trim();
$jq(".SBS2 select").eq(i).find('option:contains(' +$embedded[i]+ ')').attr('selected','selected');
}
$jq('.SBS1').hide(); / Hide Dummy Column/
I am struggling to update the code to pick up the value in 'Dummy Column' instead. I have tried updating ".Choice .c1" to ".SBS1 input" but it just selects the last value in the dropdown list for all rows.
Can someone help with what I am doing wrong?
Thanks in advance
Two things:
1. Your values are in text input fields, so you need to get the values of those fields.
2. Your selector needs to find the text input fields, so '.SBS1 input' is correct.
Thus, change your $embedded[i] = line of code to this:
$embedded[i] = $jq(".SBS1 input").eq(i).val().trim();
It seems you are doing it the hard way though. Why not just pipe your default values into the $embedded array to being with instead of creating a dummy column that you then have to hide?
var $embedded = ["${e://Field/ed1}".trim(), "${e://Field/ed2}".trim(), etc. ]
You could then delete the $embedded[i] = line altogether.
P.S. This isn't PHP where you need $ in front of variables...it actually makes it a bit confusing at first glance. Also, no need to assign jQuery to a variable, just use jQuery.

How to get path of button located in table cells

I am working on one table, where I have created one button which I am using in different rows and tables based on some condition.
I have one scenario where I need to show the button to some specific users, I have implemented the condition however I am not able get the path of the button, I can hide the cell but in that case complete cell is removed from the table which is not looking good, please help me to get the path of the button, so that I can hide it, here is the code I am using:
totalrows = document.getElementById("DEVmyTable").rows.length;
for(i = 0;i<totalrows; i++){
if(actualusernamevalue == currentusernamevalue){
table.rows[i].cells[6].style.display = "";
}
if(actualusernamevalue != currentusernamevalue){
table.rows[i].cells[6].style.display = "none";
}
}
Here in Cells[6] my button is present which I am created dynamically like this:
row = document.getElementById("DEVFirstrow");
var w = row.insertCell(6);
w.innerHTML = '<button onclick="Releaseentry(this)"type="button"
id="release" class="btn btn-primary release">Release</button>';
I have not added the complete code here, but based on the ids I am using this code in different table and rows.
in this code I have hidden the cell, for hiding the button I am not able to get the path, and that is what I am looking for.
You actually style the cell based on table.rows[i].cells[6].style.display and not its content. You choose the 6th cell and style it.Another mistake you make is that you use id in the button while the button is used in multiple rows which makes the id useless as it should be unique.
What I would do is simply use the class of the buttons and then based on the checks you have decide what the button should do using jquery, so:
if(actualusernamevalue == currentusernamevalue){
$('.release').show();
}
if(actualusernamevalue != currentusernamevalue){
$('.release').hide();
}
If I understand well what you are trying to do at least. The simpler solution, the better solution!
EDIT: By the way, you should keep in mind that if someone wants to find the button when you play with the display property in both ways, they can always find it through the source code. If someone inspects the element and changes the CSS manually they will be able to see the button, so it's always important to have back end validation too for cases like this.
I think I have got my solution finally, Thanks #natan for your help.
table.rows[i].cells[6].getElementsByTagName('button')[0].style.display = "none";
table.rows[i].cells[6].getElementsByTagName('button')[0].style.display = "";
I should have used this code.

Finding corresponding value in <select> tag and displaying it [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
What I want to achieve it is when someone select any option from the column 1 dropdown list, it should search for corresponding option in 2nd column and display its value in the 3rd column.
For example, suppose someone selected value 3 from the column 1 dropdown list, the corresponding value to be displayed in column 3 would be 30.
I don't know how to achieve this - can someone guide me a bit? Here's what I have so far:
$(document).ready(function () {
$("tbody tr td:nth-of-type(1)").on('change blur input', function() {
});
});
If you'd like, here's my JSFiddle.
$(document).ready(function () {
$("tbody tr td:nth-of-type(1) select").on("change", function () {
var thistext = $(this).find(":selected").text().toLowerCase();
var nexttext = $(this).closest("td").next().find("option[value='" + thistext + "']").text();
$(this).closest("td").siblings().eq(1).text(nexttext);
});
});
First, you need to put the handler on the <select> element, not the <td>.
Then, to find the corresponding option in the second menu, I find the one whose value is equal to the lowercase text in the selected option. Then I take its text and put it in the third column.
If that's not what you wanted, maybe you can clarify in the question about what you mean by corresponding options.
FIDDLE
You can get the index of the selected item in a select via selectedIndex. Assuming this is the select, you can have this code:
var index = this.selectedIndex;
You can then use jQuery's .eq() to find the right option in the other select elements and grab the text using text()
Here's a demo
$(document).ready(function () {
$("tbody tr td:nth-of-type(1)").on('change', 'select',function (e) {
var index = this.selectedIndex;
var parentTd = $(this).closest('td');
var nextTd = parentTd.next();
var text = nextTd.find('select > option').eq(index-1).prop('selected','selected').text();
nextTd.next().text(text);
});
});

Getting the Control inside a table

I'm trying to get the control which is inside of a cell table; in my table I have different controls, labels, checkboxes, etc.
I basically need to get the control which is used in that table
var x = document.getElementById('myTable').rows[0].cells;
alert(x[0].innerText);
//alert(x[3].innerHTML);
if (x.Control == checkbox) {
x.checked = true;
}
This will be in a loop but for now I just need to be able to check the checkbox by grabbing the control and setting that control to true
Any hints/help would be great
I doesn't really understand what you exactly need is it
document.getElementById("checkbox").checked = true;
here checkbox is the id of a particular checkbox
I would put a unique id on the form element instead and use that to grab it. In this way you can change the structure in the future. Example: perhaps you no longer want to use a table grid, but a grid of divs.
When you use innerHTML you will might also grab textnodes and other things you put in the cell.
An alternative - if you really want to find a specific cell in a table - is to give each cell a unique id on the form "cell-4-5" where 4 is the row and 5 is the column.
[EDIT]
If you want to have the cell contents returned as a DOM-object then childNodes can be used:
var x = document.getElementById('myTable').childNodes[0].childNodes[0].childNodes
If you want to have the cell contents returned as a string then innerHTML can be used:
var x = document.getElementById('myTable').childNodes[0].childNodes[0].innerHTML
To check if the checkbox is checked you need to keep it as a DOM element and thus use the first version.

Categories

Resources