2015-07-29 4 views
0

Я новичок в Javascript, и это может показаться основным вопросом.Индекс строки и столбца в таблице Javascript

Я создал таблицу HTML из файла JSON, используя javascript. Таблица, называемая «JsonTable», имеет 7 столбцов. Мне нужно создать график рассеяния, построив столбец 4 и столбец 6. Как выбрать эти столбцы? Я не могу найти ничего, что позволит мне индексировать столбцы, чтобы выбрать их.

Спасибо!

Вот мой код: когда я запустил его, появится таблица с 7 столбцами. Мне нужно построить колонку 4 и колонку 6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> 


</head> 
<body> 



<div style="margin: 20px auto; width: 500px;"> 
<table border="1" cellpadding="5" id="jsonTable" style="border-collapse: collapse;"> 
    </table> 
</div> 

<script type="text/javascript"> 

function addAllColumnHeaders(myList) { 
    var columnSet = []; 
    var headerTr$ = $('<tr/>'); 

    for (var i = 0; i < myList.length; i++) { 
     var rowHash = myList[i]; 
     for (var key in rowHash) { 
      if ($.inArray(key, columnSet) == -1) { 
       columnSet.push(key); 
       headerTr$.append($('<th/>').html(key)); 
      } 
     } 
    } 
    $("#jsonTable").append(headerTr$); 



    return columnSet; 
} 



$.getJSON("data.json", function (data) { 

    var columns = addAllColumnHeaders(data); 

    for (var i = 0; i < data.length; i++) { 
     var row$ = $('<tr/>'); 
     for (var colIndex = 0; colIndex < columns.length; colIndex++) { 

      var cellValue = data[i][columns[colIndex]]; 

      if (cellValue == null) { cellValue = ""; } 
      row$.append($('<td/>').html(cellValue)); 
     } 
     $("#jsonTable").append(row$); 
    } 
}); 

</script> 



</body> 
</html> 
+4

Пожалуйста, покажите нам, что вы сделали до сих пор .. – Lal

+2

показать нам код. Вы хотите использовать только javascript или разрешено jquery? – depperm

+0

Я просто добавил код :) Я не уверен, как это поможет, так как код просто создает таблицу. Теперь мне нужно использовать столбцы 4 и 6 таблицы и построить их друг против друга ... – Nitya

ответ

0

Этот вопрос немного широк. Чтобы немного разбить его, сначала нужно спросить «как получить данные в формате, представляющем график рассеяния», а затем «как рисовать график рассеяния».

Поскольку данные JSON, которые вы получаете, представляют собой массив массивов, вы хотите преобразовать каждый элемент массива в новый формат, список пар x/y. Метод массива .map хорош для этого:

var points = data.map(function (item) { 
    return { x: item[3], y: item[5] }; 
}); 

Это даст вам что-то вроде:

[ 
    { x: 15, y: 69 }, 
    { x: 9, y: 295 } 
] 

Если вы хотели выбрать диапазон, вы могли бы использовать .slice до .map:

var points = data 
    .slice(startIdx, count) 
    .map(function (item) { 
    return { x: item[3], y: item[5] }; 
    }); 

Как вы рисуете участок разброса оттуда, зависит от того, что требуется но это, по сути, сводится к циклическому перемещению данных с помощью некоторых команд рисования, подключению данных к библиотеке графика рассеяния или к какой-либо другой операции.

+0

Привет! Я думаю, что я, вероятно, сделал это немного сложнее. Таблица с идентификатором JsonTable в коде имеет 7 столбцов. Мне нужно построить столбец 6 по оси x и столбец 6 по оси y. Мне не нужно склеивать данные на данный момент, просто нужно отобразить все записи столбца 6 в столбце 4. :) Буду признателен, если вы могли бы сообщить мне, как я могу это сделать :) – Nitya

+0

Вот что этот код должен делать. Я предполагаю, что «столбец 6» означает шестой столбец, который будет поступать из индекса 5, а столбец 4 будет индексом 3. – Jacob

+0

Зачем брать данные, вставлять их в таблицу, а затем извлекать данные из таблицы, и засунуть его в большее количество данных? – Jacob

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