Adding row in html table using select box

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.

Please can you set up a Fiddle so it is easier to inspect your code? It probably no problem, but i need to see how your list of rows is formatted and what is in the select box. — Clemens Himmer, Dec 21 '15 at 09:46
You can not do that, see [here](http://stackoverflow.com/questions/3354979/styling-part-of-the-option-text). So, please provide the additional information i asked for, or this question cannot be answered and will be flagged. — Clemens Himmer, Dec 21 '15 at 10:01
Here's the fiddle - https://jsfiddle.net/w4r6z61q/ The data in the select box actually comes from database. — Shashank Surwase, Dec 21 '15 at 10:13
Okay, your Data in the Options are "seperated" by different numbers of spaces, which makes them hard to actually split and use, but not impossible. Also, for comparision reasons, when you add a new item and no not want it to be a dublicate, is there a unique key that you can rely on? E.g. the Sr.No? — Clemens Himmer, Dec 21 '15 at 10:27
Yes the first part of the option is Sr. No. And I dont want to separate using spaces cause its giving undesired effect. That's why I am asking this question. — Shashank Surwase, Dec 21 '15 at 10:35
You don't have to in your HTML, but you have to in your Options as i said before, there can only be text in a `option`. You can "solve" your options this way, but use proper HTML when you display your content from a option. — Clemens Himmer, Dec 21 '15 at 10:38

Clemens Himmer · Accepted Answer · 2015-12-21T12:35:25.240

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("&nbsp;*");

// 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!

thnx a ton... bt still the option format problem remains... the options texts will move based on the length of the text preceding it.. like i said before c here - https://jsfiddle.net/vaLfxab3/2/ — Shashank Surwase, Dec 21 '15 at 12:20
I appreciate the thanks, took a while. Well, this has to be solved server-side. You need to calculate how many spaces you need between your data, or you could completely throw over the select, and code something custom, which would take a lot more of time. Oh and would you consider voting up too, i'm trying to get some reputation for higher priviledges ;) — Clemens Himmer, Dec 21 '15 at 12:25
As much as I would like to vote up.. i cant.. this question took away all my reputation. :( — Shashank Surwase, Dec 21 '15 at 12:33
Ah yeah, i see, whatever :) And try to calculate your spaces server-side as it's probably easier than to make a custom HTML CSS JS stack approach that displays it better, or maybe you can find a "custom select" library somewhere and fiddle around. — Clemens Himmer, Dec 21 '15 at 12:36

score 1 · Answer 2 · edited Dec 22 '15 at 23:05

1

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

edited Dec 22 '15 at 23:05

Rory McCrossan

331,213
40
305
339

answered Dec 21 '15 at 09:33

user3403211

71
5

how would you format the select box options in the shown manner? – Shashank Surwase Dec 21 '15 at 09:38
Use .parent() or make a function and utilise this() to check for duplicate answers. You should not have downvoted this answer @ShashankSurwase – TheBlackBenzKid Dec 21 '15 at 09:44
M not the one to downvote it @TheBlackBenzKid – Shashank Surwase Dec 21 '15 at 09:55
3

This isn't a useful answer. You haven't actually explained to the OP how he can append a row to the table, just how to hook an event to the `select`. – Rory McCrossan Dec 21 '15 at 10:34

Adding row in html table using select box

2 Answers2