Question

Спасибо за ваш ответ, я работал над созданием списка из объекта с флажками, но я заметил, что чем больше список, тем труднее пользователю найти элемент. Итак, как я могу сделать этот список более похожим на изображение? Добавьте индексную букву сбоку.

const myObjects = {
  Ana: 99,
  Jhon: 99,
  Carla: 99,
  George: 99,
  Luis: 99,
  Mario: 99,
  Brandy: 99,
  Gin: 99,
  Ann: 99,
  Arnold: 99,
  Coffee: 99,
  Karl: 99,
  Kevin: 99,
  Kurt: 99,


}

//Create an arry from Object Keys and display it
let NameDataBase = []
NameDataBase = Object.keys(myObjects);

//Sort ascending
NameDataBase.sort();

//Create CheckBox and use NameDataBase for labels
var myDiv = document.getElementById("cboxes");

for (var i = 0; i < NameDataBase.length; i++) {

  var checkBox = document.createElement("input");
  var label = document.createElement("id");
  var br = document.createElement('br');
  checkBox.type = "checkbox";
  checkBox.value = NameDataBase[i];
  checkBox.id = NameDataBase[i];
  myDiv.appendChild(checkBox);
  myDiv.appendChild(label);
  myDiv.appendChild(br);

  label.appendChild(document.createTextNode(NameDataBase[i]));
}

<div id="cboxes"></div>

kmoser · Answer 1 · 13 июля 2020

Внутри вашего l oop проверьте, находитесь ли вы на первой итерации или начинаете ли вы итерацию с новой буквы, и если да, то выведите эту букву:

if ( ! i || ( NameDataBase[i][0] != NameDataBase[i-1][0] ) ) {
  myDiv.appendChild(document.createTextNode(NameDataBase[i][0]));
}

Этот тест проходит внутри вашего l oop:

for (var i = 0; i < NameDataBase.length; i++) {

  var checkBox = document.createElement("input");
  var label = document.createElement("id");
  var br = document.createElement('br');
  checkBox.type = "checkbox";
  checkBox.value = NameDataBase[i];
  checkBox.id = NameDataBase[i];
  
  // Test if we're at the first iteration, or if this iteration's name starts with a different letter from the previous iteration:
  if ( ! i || ( NameDataBase[i][0] != NameDataBase[i-1][0] ) ) {
    myDiv.appendChild(document.createTextNode(NameDataBase[i][0]));
  }

  myDiv.appendChild(checkBox);
  myDiv.appendChild(label);
  myDiv.appendChild(br);

  label.appendChild(document.createTextNode(NameDataBase[i]));
}

Если вы хотите, чтобы он был отформатирован по-другому, вы можете вместо этого вывести теги таблицы, но это должно дать вам общее представление.

Parameshwar · Answer 2 · 13 июля 2020

    <!DOCTYPE html>
    <html>
    <body>



    <div id="cboxes"></div>


    <script>
    const myObjects = {
      Ana: 99,
      Jhon: 99,
      Carla: 99,
      George: 99,
      Luis: 99,
      Mario: 99,
      Brandy: 99,
      Gin: 99,
      Ann: 99,
      Arnold: 99,
      Coffee: 99,
      Karl: 99,
      Kevin: 99,
      Kurt: 99,
    }

    //Create an arry from Object Keys and display it
    let NameDataBase = []
    NameDataBase = Object.keys(myObjects);

    //Sort ascending
    NameDataBase.sort();

    //Create CheckBox and use NameDataBase for labels
    var myDiv = document.getElementById("cboxes");
    var alphabet = null;

    for (var i = 0; i < NameDataBase.length; i++) {
      console.log(NameDataBase[i].toLowerCase().charAt(0));
      var checkBox = document.createElement("input");
      var label = document.createElement("id");
      var br = document.createElement('br');
      checkBox.type = "checkbox";
      checkBox.value = NameDataBase[i];
      checkBox.id = NameDataBase[i];
      if(alphabet == null && NameDataBase[i].toLowerCase().charAt(0)) //cond to add first character before any other check
      {
        myDiv.appendChild(document.createElement('p'));
        var character = document.createTextNode("Alphabet : "+NameDataBase[i].toLowerCase().charAt(0));
        myDiv.appendChild(character);
        myDiv.appendChild(document.createElement('p'));
      }
      if(alphabet && alphabet != NameDataBase[i].toLowerCase().charAt(0))//Cond to check first char is changed in sorting
      {
        if(alphabet)
        {
              myDiv.appendChild(document.createElement('p'));
              var character = document.createTextNode("Alphabet : "+NameDataBase[i].toLowerCase().charAt(0));
              myDiv.appendChild(character);
              myDiv.appendChild(document.createElement('p'));

        }
        myDiv.appendChild(checkBox);
        myDiv.appendChild(label);
  
      }
      else
      {
          myDiv.appendChild(checkBox);
          myDiv.appendChild(label);
      }

      myDiv.appendChild(br);
      label.appendChild(document.createTextNode(NameDataBase[i]));
      alphabet = NameDataBase[i].toLowerCase().charAt(0);
    }

    </script>

    </body>
    </html>

Вы можете добавить ul / ol li или список таблиц для изменения представления, как показано ниже

for (var i = 0; i < NameDataBase.length; i++) {
        var li = document.createElement('li');     // create li element.

  console.log(NameDataBase[i].toLowerCase().charAt(0));
  var checkBox = document.createElement("input");
  var label = document.createElement("id");
  var br = document.createElement('br');
  checkBox.type = "checkbox";
  checkBox.value = NameDataBase[i];
  checkBox.id = NameDataBase[i];
  if(alphabet == null && NameDataBase[i].toLowerCase().charAt(0))
  {
          var ul = document.createElement('ul');
         var character = document.createTextNode(NameDataBase[i].toUpperCase().charAt(0));
          ul.appendChild(character);
  }
  if(alphabet && alphabet != NameDataBase[i].toLowerCase().charAt(0))
  {
    if(alphabet)
    {
                var character = document.createTextNode(NameDataBase[i].toUpperCase().charAt(0));
          ul.appendChild(character);
                var ul = document.createElement('ul');

    }
    li.appendChild(checkBox);
    li.appendChild(label);
     ul.appendChild(li);
  }
  else
  {
    li.appendChild(checkBox);
    li.appendChild(label);
     ul.appendChild(li);
  }
  myDiv.appendChild(ul);
  label.appendChild(document.createTextNode(NameDataBase[i]));
  alphabet = NameDataBase[i].toLowerCase().charAt(0);
  }

Добавить индексную букву в список из JavaScript

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Добавить индексную букву в список из JavaScript

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов