Как динамически выравнивать элементы таблицы при изменении размера таблицы? - PullRequest
Новая
       4

Как динамически выравнивать элементы таблицы при изменении размера таблицы?

0 голосов
/ 10 июля 2020

введите описание изображения здесь 

function ausgabe()
{
    var array= new Array();
    array.push(window.document.Rechner.Display2.value+
    window.document.Rechner.Display.value);
    console.log(array);

    var myTableDiv = document.getElementById("Historie")
    var table = document.createElement('TABLE')
    var tableBody = document.createElement('TBODY')
        table.border = '0';
        table.appendChild(tableBody);
    var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        
    var td = document.createElement('TD')
        td.width = '275';
        td.style.textAlign="right";
        td.appendChild(document.createTextNode(array[0]));

        tr.appendChild(td);
        myTableDiv.appendChild(table)

}

История ввода показана справа. Текст с выравниванием по правому краю. Я хочу, чтобы была ширина по умолчанию, но если введено что-то более длинное, другие записи должны быть выровнены по новой ширине.

1 Ответ

0 голосов
/ 10 июля 2020 
<html>
<head>
<meta charset="UTF-8">
<title>Taschenrechner</title>
<script type="text/javascript">

var equalsPressed = false;

function Check(Eingabe)
{
// indexof=suche in "0123456789[]()-+*%/" nach den chars der eingabe(0 bis 1 kleiner als länge (also alle)) und schaue an welcher position im string diese sind.wenn position kleiner0(also nicht vorhanden)
// dann return false, ansonsten alles gut
  var nur_das ="0123456789[]()-+*%/";
  for (var i = 0; i < Eingabe.length; i++)
   if (nur_das.indexOf(Eingabe.charAt(i))<0 ) return false;
  return true;
}

function Ergebnis()
{
    var z = document.getElementById("Historie");
    z.style.display = "block";
    equalsPressed = true;
    var x = 0;
    var y = 0;

    if (Check(window.document.Rechner.Display.value) || equalsPressed)
    y = window.document.Rechner.Display.value;
    window.document.Rechner.Display2.value = y;
    x = eval(window.document.Rechner.Display.value);    
    window.document.Rechner.Display.value ="="+x;
}

function add(Zeichen)
{
        if(equalsPressed)
        {
        window.document.Rechner.Display2.value = " ";
        window.document.Rechner.Display.value = " ";
        }
   window.document.Rechner.Display.value =
   window.document.Rechner.Display.value + Zeichen;
   equalsPressed = false;
}

function backspace()
{
   var abschneiden = window.document.Rechner.Display.value;
   for (var i = 0; i < abschneiden.length; i++) 
    {
        var output = abschneiden.slice(0, -1);
        window.document.Rechner.Display.value = output;
    }
}   

function ausgabe()
{
    var array= new Array();
    array.push(window.document.Rechner.Display2.value+
    window.document.Rechner.Display.value);
    console.log(array);

    var myTableDiv = document.getElementById("Historie")
    var table = document.createElement('TABLE')
    var tableBody = document.createElement('TBODY')
        table.border = '0';
        table.appendChild(tableBody);
    var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        
    var td = document.createElement('TD')
        td.width = '275';
        td.style.textAlign="right";
        td.appendChild(document.createTextNode(array[0]));

        tr.appendChild(td);
        myTableDiv.appendChild(table)

}


</script>

<style>
body{
font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
}

.button{
background-color: #A4A4A4;
background: linear-gradient(240deg, grey, white);
color: black;
width:60px;
text-align:center;
font-family:System,sans-serif;
font-size:100%;
}
.ops{
background-color: #A4A4A4;
background: linear-gradient(240deg, grey, white);
color: black;
width:60px;
text-align:center;
font-family:System,sans-serif;
font-size:100%;
}


.button:hover{
    color: #2E2E2E;
    background-color: #FAFAFA;
    background: linear-gradient(30deg, darkgrey, lightgrey,grey);;
}

.display{
width:100%;
text-align:right;
font-family:System,sans-serif;
font-size:100%;
}

#Historie{
background: linear-gradient(30deg,silver,white,grey);;
border: 5px outset;
float:left;
text-align:right;
}

#eins{
background: linear-gradient(30deg,silver, grey,DimGray);;
}

#zwei{
background: linear-gradient(90deg,silver, grey);;
}

#tabelle{
width: 300px;
height:235px;
float:left;
}


</style>
</head>
    <body bgcolor="#FFFFE0" text="#000000">
        <form name="Rechner" action="" onSubmit="Ergebnis();return false;">
            <table id="tabelle" style="float:left" border="7" cellpadding="12" cellspacing="0">
            <tr>
                <td id="eins">
                    <input type="text"name="Display2"class="display"readonly>
                    <input type="text"name="Display"class="display"readonly></td>
            </tr>

            <tr>
                <td id="zwei">
                
                <table border="1" cellpadding="0" cellspacing="0">
                <tr>
                    <td><input
                        type="button"
                        class="button"
                        value="  7   "
                        onClick="add('7')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value="  8   "
                        onClick="add('8')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value="  9   "
                        onClick="add('9')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value="  &#171  "
                        onClick="backspace()">
                    </td>
                </tr>

                <tr>
                    <td><input
                        type="button"
                        class="button"
                        value="  4   "
                        onClick="add('4')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value="  5   "
                        onClick="add('5')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value="  6   "
                        onClick="add('6')">
                    </td>
                    <td><input
                        type="button"
                        class="ops"
                        value="  +   "
                        onClick="add('+')">
                    </td>
                </tr>
                
                <tr>
                    <td><input
                        type="button"
                        class="button"
                        value="  1   "
                        onClick="add('1')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value="  2   "
                        onClick="add('2')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value="  3   "
                        onClick="add('3')">
                    </td>
                    <td><input
                        type="button"
                        class="ops"
                        value="  -   "
                        onClick="add('-')">
                    </td>
                </tr>
                
                <tr>
                    <td><input
                        type="button"
                        class="button"
                        value="  .   "
                        onClick="add('.')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value="  0   "
                        onClick="add('0')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value="  =   "
                        onClick="Ergebnis();ausgabe()">
                    </td>
                    <td><input
                        type="button"
                        class="ops"
                        value="  *   "
                        onClick="add('*')">
                    </td>
                </tr>

                <tr>
                    <td><input
                        type="button"
                        class="button"
                        value=" ( "
                        onClick="add('(')">
                    </td>
                    <td><input
                        type="button"
                        class="button"
                        value=" ) "
                        onClick="add(')')">
                    </td>
                    <td><input
                        type="reset"
                        class="button"
                        value="  C  ">
                    </td>
                    <td><input
                        type="button"
                        class="ops"
                        value="  /   "
                        onClick="add('/')">
                    </td>
                </tr> 

                </table>
                </td>
            </tr>
            </table>
        </form>

<div class="Historie"id="Historie"hidden="true">                    
</div>
    </body>
</html>
...