Javascript: изменить функцию для динамического создания таблицы

Я довольно новичок в JavaScript и хотел бы использовать функцию для вставки таблицы в форму. До сих пор у меня есть следующий код (рабочий - за исключением заголовка), но я борюсь со следующим:Javascript: изменить функцию для динамического создания таблицы

1) Как я могу использовать приглашение (всплывающее окно) для запроса нужной таблицы вместо использования полей ввода, таких как У меня есть ? 2) Как включить здесь ширину (в%)? 3) Как я могу всегда добавлять заголовок таблицы?

Я надеюсь, что кто-то здесь поможет мне понять это.

Мой код:

<html> 
<head> 
<script type="text/javascript"> 
    function insertTable() 
    { 
     var num_rows = document.getElementById('rows').value; 
     var num_cols = document.getElementById('cols').value; 
     var theader = "<table id='table1'><thead></thead>"; 
     var tbody = ""; 

     for(var i = 0; i < num_rows; i++) 
     { 
      tbody += "<tr>"; 
      for(var j = 0; j < num_cols; j++) 
      { 
       tbody += "<td>"; 
       tbody += "?"; 
       tbody += "</td>" 
      } 
      tbody += "</tr><br />"; 
     } 
     var tfooter = "</table>"; 
     document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
    } 
</script> 
<style> 
    #table1 
    { 
     border:solid 1px; 
     border-collapse:collapse; 
     width:100%; 
    } 

    #table1 td 
    { 
     border:solid 1px; 
     vertical-align:middle; 
    } 
</style> 
</head> 
<body> 
    <form name="tableForm"> 
     <label>Rows: <input type="text" name="rows" id="rows"/></label><br /> 
     <label>Cols: <input type="text" name="cols" id="cols"/></label><br /> 
     <label>Width (%): <input type="text" name="width" id="width"/></label><br /> 
     <button type="button" onclick="insertTable()">Create Table</button> 
     <div id="wrapper"></div> 
    </form> 
</body> 
</html>

Спасибо за любую помощь в этом, Тим

источник

2013-10-27 user2571510

Я добавил несколько изменений в JS и CSS в ваш код. Это даст вам заголовок для каждого столбца, а также установит ширину таблицы в%

Чтобы отобразить форму во всплывающем окне, вы можете использовать любой плагин jquery. Лучший JQ плагин для всплывающих окон является jquery-lightbox-me

<html> 
<head> 
<script type="text/javascript"> 
function insertTable() 
{ 
    var num_rows = document.getElementById('rows').value; 
    var num_cols = document.getElementById('cols').value; 
    var width = document.getElementById('width').value; 
    var theader = "<table id='table1' width = ' "+ width +"% '>"; 
    var tbody = ""; 

    for(var j = 0; j < num_cols; j++) 
    { 
     theader += "<th>header col "+ (j+1) +" </th>"; 
    } 

    for(var i = 0; i < num_rows; i++) 
    { 
     tbody += "<tr>"; 
     for(var j = 0; j < num_cols; j++) 
     { 
      tbody += "<td>"; 
      tbody += "?"; 
      tbody += "</td>" 
     } 
     tbody += "</tr><br />"; 
    } 
    var tfooter = "</table>"; 
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
} 
</script> 
<style> 
#table1 
{ 
    border:solid 1px; 
    border-collapse:collapse; 
} 

#table1 th 
{ 
    border:solid 1px; 
    border-collapse:collapse; 
} 

#table1 td 
{ 
    border:solid 1px; 
    vertical-align:middle; 
} 
</style> 
</head> 
<body> 
<form name="tableForm"> 
    <label>Rows: <input type="text" name="rows" id="rows"/></label><br /> 
    <label>Cols: <input type="text" name="cols" id="cols"/></label><br /> 
    <label>Width (%): <input type="text" name="width" id="width"/></label><br /> 
    <button type="button" onclick="insertTable()">Create Table</button> 
    <div id="wrapper"></div> 
</form> 
</body> 
</html>

Надеется, что это поможет вам.

Благодаря

источник

2013-10-27 11:43:51 Swati

Это именно то, что я искал - большое спасибо! – user2571510

np :) .. Рад, что я могу вам помочь .. !! – Swati

Посмотрите на JQuery и шоу()/скрыть() функции. Вы можете использовать «реальные» javascript-всплывающие окна, но некоторые браузеры/браузерные конфигурации не откроют новую вкладку/окно. Подводя итог, подумайте о своем случае использования, создайте все необходимые контейнеры-контейнеры и покажите ровно один контейнер div на своей странице. Вы можете найти более подробную информацию о JQuery здесь http://www.w3schools.com/jquery/jquery_hide_show.asp и, конечно, здесь http://api.jquery.com/show/. Вы также можете изменить атрибуты table и соответствующие css с помощью JQuery-функций.

источник

2013-10-27 11:04:09 Jochen

Спасибо за ваш ответ, но я думаю, что это идет в другом направлении. Я не хочу ничего скрывать или показывать, я хочу создать таблицу динамически. – user2571510

Я думал, вам нужно получить всю необходимую информацию в одном div, а в скрытом div таблица будет создана. Вот SO-поток, как создать таблицу динамически с помощью JQuery: http://stackoverflow.com/questions/17440239/jquery-dynamic-table-create – Jochen

Пусть говорят, у меня есть CSV, он должен работать

Header1,Header2,Header3 
1,2,3 
4,5,6 



     var data = evt.target.result; 
     var delimiter = ','; 
     var escape = '\n'; 
     var rows = data.split(escape); 
     var tbl = document.createElement('table'); 
     tbl.style.width = '100%'; 
     //tbl.setAttribute('border', '1', "green"); 
     tbl.className = "table table-hover table-condensed dataTable"; 
     var tbdy = document.createElement('tbody'); 


     for (index in rows) { 
      var tr = document.createElement('tr'); // creating new row 
      var items = rows[index].split(delimiter); 
      for (itemindex in items) { 
       var td = ""; 
       if (index == 0) { 
        td = document.createElement('th'); 
       } else { 
        td = document.createElement('td'); 
       } 

       td.appendChild(document.createTextNode(items[itemindex])); // creating new cell 
       tr.appendChild(td); // add to current tr 
      } 

      tbdy.appendChild(tr); // add new row (tr) to table 
     } 
     tbl.appendChild(tbdy); 

     document.getElementById('byte_content').appendChild(tbl);

источник

2014-02-20 09:21:46

Javascript: изменить функцию для динамического создания таблицы

ответ

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