Создать таблицу, нажимая кнопки - PullRequest
Новая
       8

Создать таблицу, нажимая кнопки

3 голосов
/ 21 сентября 2011

Вот что я хочу сделать.Надеюсь, это не так уж сложно.

Мне нужно создать таблицу с div внутри каждого тд, которая создается нажатием кнопок ... например

Пожалуйста, выберите количество строк в таблице

enter image description here

Пожалуйста, выберите количество столбцов в таблице ..

enter image description here

Результат:

Итакесли вы нажмете 4 и 4, это создаст таблицу 4 X 4. Если вы нажмете 3 X 1, вы создадите таблицу 3 X 1 и т. д.

Любая помощь будет принята с благодарностью !!

Вот пример того, что я пытаюсь заставить работать.Я все еще просматриваю все ваши комментарии!

http://jsfiddle.net/irocmon/7WD8v/

Я знаю, что мне нужно добавить в Javascript, как получить элемент по id.

Ответы [ 4 ]

2 голосов
/ 21 сентября 2011

Я бы использовал 2 формы, 1 для верхнего ряда чисел и одну для второго ряда чисел, где каждое число является предопределенным значением пользовательского ввода.

Назначьте кнопку отправки для каждого изчисла, использующие javascript для каждой формы, оттуда получают результаты с помощью javascript и выполняют код / ​​скрипт, необходимый для выполнения поставленной задачи.

Я бы порекомендовал использовать для этого jquery.

Веселись ...

0 голосов
/ 21 сентября 2011

Это проверено, и обратите внимание, что оно не справится, если они будут пытаться строить таблицы снова и снова, оно будет добавлять столбцы и строки, но я позволю вам это обработать.:) 

    <html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        var Rows = 0;
        var ColString = "";
        var TableBuilder;

        $(document).ready(function () {
            $("#Rows input").click(function () { Rows = $(this).val(); });
            $("#Cols input").click(buildCols);
            $("#Submit").click(CreateTable);
        });

        function buildCols() {
            for (i = 0; i < $(this).val(); i++) {
                ColString = ColString + "<td></td>";
            }
            return ColString;
        }
        function CreateTable() {
            if (Rows == 0 || ColString == "") {
                $("#PleaseSelect").removeClass("displayNone");
            }
            else {
                for (i = 0; i < Rows; i++) {
                    TableBuilder = TableBuilder + "<tr>" + ColString + "</tr>";
                }
                $("#table tbody").html(TableBuilder);
            }
        }

    </script>
    <style type="text/css">
      .displayNone { display: none; }
    </style>
    </head>
    <body>

        <table id="table" border="1">
             <tbody>
             </tbody>
         </table>

    <br><br>
    How many Rows?
    <div id="Rows">
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">
    </div>
    <br />
    How Many Columns?
    <div id="Cols">
        <input type="button" value="1" >
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">
    </div>
    <br />
    <div id="PleaseSelect" class="displayNone">Please select both a column number and a row number.</div>
    <input type="button" id="Submit" value="Build Table" />

    </body>
    </html>
0 голосов
/ 21 сентября 2011

Используя JavaScript, есть 2 локальные переменные: ширина и высота. В каждом DIV есть функция onclick, которая присваивает это значение соответствующей переменной, а затем проверяет, были ли назначены обе переменные (таким образом, они могут сначала щелкнуть по высоте или ширине). Если оба они есть, используйте эти переменные в цикле for для генерации HTML-кода в javascript:

var HTML = '<table>';

for(var i = 0; i < height; i++)

{ HTML += '<tr>';

for(var j = 0; j < width; j++)

{ HTML += '<td>...</td>';}

HTML += '</tr>';}

document.getElementById('where_you_want_the_table').innerHTML = HTML;

0 голосов
/ 21 сентября 2011

вы можете достичь этого с помощью довольно простых операторов if или переключателя

, если у вас есть 2 переменные строки и столбцы 

//loop for number of rows
for "x" number of rows{
 document.write("<tr>");
       if(columns > 0)
       {
        switch statement to output column
        1: document.write("<td></td>");
        2: document.write("<td></td><td></td>");
       }
 document.write("</tr>");
}

синтаксис здесь очень и очень прост,этот код не будет работать, но он может помочь вам начать, что вы на самом деле хотите сделать с таблицей, как только она у вас будет?

...