Javascript select in table cell

Я хочу добавить выделение (выпадающее меню) в каждую строку таблицы. Таблица создана с использованием javascript и имеет динамический контент, импортированный из xml-файлов с помощью JQuery. Мне удалось успешно импортировать весь контент, однако выпадающие списки отображаются только в последней строке. Я бы посоветовал, если вы, ребята, можете помочь мне в раскрытии списка в каждом ряду. Большое спасибо!Javascript select in table cell

Ниже приведен фрагмент кода с пустым выбором (импортируемый контент хранится в этих элементах). Все выходы, такие как «строка», предназначены только для тестирования. «Нумераторы» также предназначены для тестирования.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta charset="utf-8" > 

    <title>table select test</title> 
</head> 
<body> 

    <table id="scrolltable"> 
    </table> 

<script type="text/javascript"> 
    var tabbody = document.getElementById("scrolltable"); 

    var types = document.createElement("select"); 
    var units = document.createElement("select"); 

    parseTable(3, types, "row ", units); 

    function parseTable(numrows, types, limits, units) { 
     for (i = 0; i < numrows; i++) { 
      var row = document.createElement("tr"); 
      var cell1 = document.createElement("td"); 
      cell1.style.width="300px"; 
      cell1.appendChild(types); 
      row.appendChild(cell1); 
      var cell2 = document.createElement("td"); 
      cell2.innerHTML = limits + i; 
      cell2.style.width = "100px"; 
      row.appendChild(cell2); 
      var cell3 = document.createElement("td"); 
      cell3.appendChild(units); 
      row.appendChild(cell3); 
      tabbody.appendChild(row); 
     } 
    } 
</script> 
</body> 
</html>

источник

2014-09-01 Otto

Без минимального, например, это может быть трудно точно определить этот вопрос, но мое предположение:

создаются типы и единицы элементы только до вашего цикла, так что вы добавления одни и те же объекты, над и снова, и каждый раз, когда вы добавляете одну из них в ячейку, вы берете ее из исходной ячейки и помещаете ее в новую. То, что делает «appendChild», не клонирует элемент, он использует один и тот же (http://www.w3schools.com/jsref/met_node_appendchild.asp).

При создании нового выбора элемента в каждом шаге ваших для, вы должны быть хорошо =)

источник

2014-09-01 13:41:30

Большое спасибо. Перемещение декларации в цикл действительно решило проблему. – Otto

types и units определяются один раз, поэтому они являются отдельными элементами. Поэтому они перемещаются туда, где вы в последний раз назывались appendChild. Если вы хотите посмотреть, что происходит, попробуйте добавить alert(''); перед тем, как закончить цикл for и увидеть его в действии для каждой строки.

Если вы хотите, чтобы добавить его в каждой строке, то вам нужны новые экземпляры на каждом itterration:

function parseTable(numrows, types, limits, units) { 
    for (i = 0; i < numrows; i++) { 
     var row = document.createElement("tr"); 
     var cell1 = document.createElement("td"); 
     cell1.style.width="300px"; 
     types = document.createElement("select"); 
     cell1.appendChild(types); 
     row.appendChild(cell1); 
     var cell2 = document.createElement("td"); 
     cell2.innerHTML = limits + i; 
     cell2.style.width = "100px"; 
     row.appendChild(cell2); 
     var cell3 = document.createElement("td"); 
     units = document.createElement("select"); 
     cell3.appendChild(units); 
     row.appendChild(cell3); 
     tabbody.appendChild(row); 
    } 
}

источник

2014-09-01 13:41:32

Большое спасибо. – Otto

Javascript select in table cell

ответ

Смежные вопросы