How can I individually address lines in an html table?

Question

I have here my small table where I can first choose the gender from a dropdown list. This selection then limits the choices of the second dropdown list.

Now the problem is, if I select for example "Männlich" at the first entry and add a second line over the button, I have there in the second dropdown list the limitation according to the first line where I selected "Männlich".

How can I make the selection for each line individually? Can anyone help me?

$('#selectOption1').on('change', setAnrede);

function setAnrede() {
  if ($(this).val() === 'Männlich') {
    $('.input-field option[value="Sehr geehrte"]').hide();
    $('.input-field option[value="Liebe"]').hide();
    $('.input-field option[value="Werte"]').hide();

    $('.input-field option[value="Sehr geehrter"]').show();
    $('.input-field option[value="Lieber"]').show();
    $('.input-field option[value="Werter"]').show();

  }

  if ($(this).val() === 'Weiblich') {
    $('.input-field option[value="Sehr geehrter"]').hide();
    $('.input-field option[value="Lieber"]').hide();
    $('.input-field option[value="Werter"]').hide();

    $('.input-field option[value="Sehr geehrte"]').show();
    $('.input-field option[value="Liebe"]').show();
    $('.input-field option[value="Werte"]').show();

  }
}


function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var colCount = table.rows[1].cells.length;

  for (var i = 0; i < colCount; i++) {

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    //alert(newcell.childNodes);
    switch (newcell.childNodes[1].type) {
      case "checkbox":
        newcell.childNodes[1].checked = false;
        break;
    }
  }
}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].querySelector('input[name=chk]');
      if (chkbox && true == chkbox.checked) {
        if (rowCount <= 2) {
          alert("Cannot delete all the rows.");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }


    }
  } catch (e) {
    alert(e);
  }
}



  
  
  
    
      
        
          
          Geschlecht
          Anrede
          Vorname
          Nachname
          Titel
          E-Mail
          
          
        
        
          
            
              
                            
                            
                        
            
          
          
            
              
                Geschlecht angeben:
                
              
            
          
          
            
              
                Anrede angeben:

errand · Accepted Answer

as i already said in my comment, your dynamic generated rows won't react on the change of your gender, since the click event is not bound. this can be avoided, by changing $('#selectOption1').on('change', setAnrede);into

$('table').on('change', '.genderSelect', setAnrede);

this binds the event to the table, but only fires when the change event matches to a descendant element with the class .genderSelect (which you now add to your select box ;) )

first of all, instead of showing/hiding unneeded values, i prefer to set the options only when the gender is chosen. additionally, i like to have only on place in my code, where i specify the options of my select boxes. mainly to avoid the if statements or errors due to mispelling. therefore, in the beginning of the script, i create an object, which i use to populate the options for both select boxes!

 var gsAddress = {
   "neutral": ["Guden", "Hallo", "Moin"],
   "male": ["Sehr geehrter", "Werter", "Lieber"],
   "female": ["Sehr geehrte", "Werte", "Liebe"]
 };

as i said, i want to populate both select boxes with options using the above object.

the first select box (genderSelect), needs a new function, which gets called within the document ready function:

$(".genderSelect").each(prefillGenderSelect); //don't forget to add the class to the select element

function prefillGenderSelect() {
   var curSelBox = this; //assign the current context to a variable
   $.each(gsAddress, function(key, value) { // loop through the object, created above
     var newOption = $('

as soon as you change the genderSelect, the setAnrede fires and populates the gsAddress select box with its options. my setAnrede function, looks like this:

function setAnrede() {
   var myRow = $(this).closest("tr"); // travel up your DOM
   var curSelectBox = myRow.find(".gsAddress"); //travel down your DOM and find your select Box
   $(curSelectBox).find("option").remove(); //wipe out all existing options

   $.each(gsAddress[$(this).val()], function(index, value) { //gs for gender specific

     var newOption = $('

for your 'add row' button. instead of copying the first row, you should define a default row as object and simply append it to your table. this would look similar to the 'option' object created earlier

var defaultRow = $(""); //if there are attributes like class and id needed, add them like in the option declaration.

var exampleCell = $("", {    //every cell needs to be defined, ofc
  'class' : 'aTableCell'         //if you need to add class information to the td
  }
$(defaultRow).append(exampleCell); //and if it is created, append it into your row
$("#myTable").append(defaultRow); // in the end, just append the complete row to your table

i've created a working fiddle. but i reduced the html to the minimum needed and also implemented a simple addRow button, using the .clone() function of jquery. this was only there, to see if it's still working on new rows. .clone() also copies id's of elements, when they exist. so cloning shouldn't be done, if id's are needed... here's the link: http://jsfiddle.net/sbtywfjL/

How can I individually address lines in an html table?

Answers (1)

Related Questions