1

inserir a descrição da imagem aquiPega o valor da celula de uma tabela Javascript [Ajuda] Preciso inserir o valor do nó automaticamente no ultimo input text "Gesamt" após entrar com um valor qualquer da primeira coluna vertical, dentro do input text "Mundlich" e da primeira linha horizontal, dentro do input text "Schriftlich". Ou seja.. Preciso pegar o valor do index do nó que cruza um valor entre a primeira linha e a primeira coluna.

    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
        <link href="css/jquery.bdt.css" type="text/css" rel="stylesheet">
        <link href="css/styles.css" type="text/css" rel="stylesheet">
    </head>
    <style>
       body{
    background-image: url("/img/bg.png");
    width: auto;
    height:auto;
}
    table.searchtbl td, table.pricing th {
        text-align: center;
       padding: 0px 2px 0px 2px;
        border: 1px;
    }

    table.searchtbl th {
        background-color: rgb(230, 61, 61);
        border: 1px solid rgb(114, 224, 114);
        color: white;
         font-family: 'Times New Roman', Times, serif
    }
    table.searchtbl td {
        border: 1px solid silver;
         font-size: 14px;
        font-family: Arial;
    }
   .highlighted {
        color: white;
    }

    table.searchtbl {
        border: 0px;
        border-spacing: 0px;
    }

    .cur_col {
        background-color: rgb(209, 164, 68) !important;
        border: 1px solid rgb(14, 11, 5) !important;
        border-left: 0px solid #CFE3F9 !important;
        border-right: 0px solid #CFE3F9 !important;
    }

    .cur_cell {
        background-color: #0a0ae9 !important;
        border: 0px solid #706d5e !important;
        border: 0px solid rgb(11, 78, 150) !important;
    }

    .cur_row {
        background-color: rgb(209, 164, 68) !important;
        border: 1px solid rgb(10, 8, 2) !important;
        border-top: 0px solid rgb(209, 164, 68) !important;
        border-bottom: 0px solid rgb(209, 164, 68) !important;
    }


.frm {
    float: right;
    padding: 10% 20% 0px 0px; 
    margin-top: 30px;
}

* {
  box-sizing: border-box;
}

.box1 {
  float: left;
  width: 50%;
  padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
  height: auto;
}

.box2 {
  float: right;
  width:50%;
  padding-right: 0px;
  padding-top: 0px;
    padding-left: 0px;
  height: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.bdt > thead > tr > th, .bdt > tbody > tr > td {
    font-size: 13px;
}

.bdt tr:last-child td, .bdt tr:last-child th {
    border-bottom: 2px solid #1b1916;
}

.bdt > tbody > tr > td, .bdt > tbody > tr > th, .bdt > tfoot > tr > td, .bdt > tfoot > tr > th, .bdt > thead > tr > td, .bdt > thead > tr > th {
    border-color: #e6e7ed;
    padding: 1px 0px 18px 53px;
}
.nota {
    color: #fa0909
}
fieldset {
    position: inherit;
    border: none;
    padding: 0;
}
legend {
    float: left;
    padding: 0;
    margin-right: 5px;
    width: 50px;
    text-align: right;
}
label {
    position: absolute;
    left: -9999px;
}

#id{
    width: 80px;
    background-color: bisque;
}
#company{
    width: auto;
}
#name{
    width: auto;
    text-transform: capitalize;
}

#m{
    width: 100px;

}
#s{
    width: 100px;

}

#g{
    width: 90px;
    background-color: ghostwhite;

}

td {
  cursor: pointer;
}

.jumbotron{
    height: 120px;
    padding-bottom: 50px;
    padding-top: 5px
}

.dateTime{
    float: right;
    padding: 20px 50px 0px 0px;
    background-color: #fa0909;
    height: auto;
    width: auto;
}
.date{
    font-size: 30px;
    float: right;
    padding-right: 50px;
    color: rgb(62, 71, 62);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.time{
    font-size: 20px;
    float: right;
    padding-bottom: 0px;
    padding-right: 40px;
    color: rgb(97, 100, 77);
    font-family: 'Times New Roman', Times, serif;
}

.btnShow{
    height: 14px;
    width: 20px;
    padding-top: 0px;
}

    </style>

    <body>

        <div class="jumbotron">

            <div class="date">
                <span id="dataAtual"></span><br>
                <div class="time">
                    <span id="horaAtual"></span>
                </div>
            </div>

            <form class="form-inline">

                <div class="container">
                    <input type="button" class="btn btn-danger mb-2 btn-sm"
                        onclick="exportTableToExcel('table', 'Teilnehmer')" value="Export">
                    <br><br>
                    <input type="text" class="form-control mb-2 mr-sm-2" name="name" id="name" placeholder="Name">
                    <input type="text" class="form-control mb-2 mr-sm-2" maxlength="3" name="m" id="m"
                        placeholder="Mundlich">
                    <input type="text" class="form-control mb-2 mr-sm-2" maxlength="3" name="s" id="s"
                        placeholder="Schriftlich">
                    <input type="text" class="form-control mb-2 mr-sm-2" maxlength="3" name="g" id="g" placeholder="Gesamt">
                    <input type="button" class="btn btn-primary mb-2 btn-sm" value="Add" onclick="addHTMLTableRow();">

                    <input type="button" class="btn btn-danger mb-2 btn-sm" value="Edit"
                        onclick="editHtmlTableSelectedRow()">


                    <input type="button" class="btn btn-warning mb-2 btn-sm" value="Delete" onclick="deleta()">
                </div>


            </form>

        </div>
        <div class="clearfix">

            <div class="box1">

                <div class="container col-sm-10">

                    <table class="table table-hover" id="table">
                        <tr>
                            <th scope="col">Teilnehmer</th>
                            <th scope="col">Mundlisch</th>
                            <th scope="col">Schriftlich</th>
                            <th class="nota" scope="col">Gesamt</th>
                        </tr>

                    </table>
                </div>

            </div>

            <!--TABELA NOTAS-->
            <div class="box2">
                <table class='searchtbl' style="background-color: black">
                    <tr>
                        <th style="width:5px;height:5px"></th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                        <th style="width:20px;">S</th>
                    </tr>

                    <tr id="firstRow">
                        <th style="height:10">M</th>
                        <td></td>
                        <td class="row-s">A1<span>a</span></td>
                        <td class="row-s">A1<span>b</span></td>
                        <td class="row-s">A1<span>c</span></td>
                        <td class="row-s">A2<span>a</span></td>
                        <td class="row-s">A2<span>b</span></td>
                        <td class="row-s">A2<span>c</span></td>
                        <td class="row-s">B1<span>a</span></td>
                        <td class="row-s">B1<span>b</span></td>
                        <td class="row-s">B1<span>c</span></td>
                        <td class="row-s">B2<span>a</span></td>
                        <td class="row-s">B2<span>b</span></td>
                        <td class="row-s">B2<span>c</span></td>
                        <td class="row-s">C1<span>a</span></td>
                        <td class="row-s">C1<span>b</span></td>
                        <td class="row-s">C1<span>c</span></td>
                        <td class="row-s">C2<span>a</span></td>
                        <td class="row-s">C2<span>b</span></td>
                        <td class="row-s">C2<span>c</span></td>
                    </tr>
                    <tr>
                        <th style="height:10">M</th>
                        <td class="row-m">A1<span>a</span></td>
                        <td>A1<span>a</span></td>
                        <td>A1<span>b</span></td>
                        <td>A1<span>b</span></td>
                        <td>A1<span>c</span></td>
                        <td>A1<span>c</span></td>
                        <td>A2<span>a</span></td>
                        <td>A2<span>b</span></td>
                        <td>A2<span>b</span></td>
                        <td>A2<span>c</span></td>
                        <td>B1<span>a</span></td>
                        <td>B1<span>a</span></td>
                        <td>B1<span>b</span></td>
                        <td>B1<span>c</span></td>
                        <td>B2<span>a</span></td>
                        <td>B2<span>b</span></td>
                        <td>B2<span>c</span></td>
                        <td>C1<span>a</span></td>
                        <td>C1<span>a</span></td>
                    </tr>
                    <tr>
                        <th style="height:10">M</th>
                        <td class="row-m">A1<span>b</span></td>
                        <td>A1<span>a</span></td>
                        <td>A1<span>b</span></td>
                        <td>A1<span>c</span></td>
                        <td>A1<span>c</span></td>
                        <td>A2<span>a</span></td>
                        <td>A2<span>a</span></td>
                        <td>A2<span>b</span></td>
                        <td>A2<span>c</span></td>
                        <td>A2<span>c</span></td>
                        <td>B1<span>a</span></td>
                        <td>B1<span>b</span></td>
                        <td>B1<span>b</span></td>
                        <td>B1<span>c</span></td>
                        <td>B2<span>a</span></td>
                        <td>B2<span>b</span></td>
                        <td>B2<span>c</span></td>
                        <td>C1<span>a</span></td>
                        <td>C1<span>b</span></td>
                    </tr>
                    <tr>
                        <th style="height:10">M</th>
                        <td class="row-m">A1<span>c</span></td>
                        <td>A1<span>b</span></td>
                        <td>A1<span>b</span></td>
                        <td>A1<span>c</span></td>
                        <td>A2<span>a</span></td>
                        <td>A2<span>a</span></td>
                        <td>A2<span>b</span></td>
                        <td>A2<span>b</span></td>
                        <td>A2<span>c</span></td>
                        <td>B1<span>a</span></td>
                        <td>B1<span>a</span></td>
                        <td>B1<span>b</span></td>
                        <td>B1<span>c</span></td>
                        <td>B1<span>c</span></td>
                        <td>B2<span>a</span></td>
                        <td>B2<span>b</span></td>
                        <td>B2<span>c</span></td>
                        <td>C1<span>a</span></td>
                        <td>C1<span>b</span></td>
                    </tr>
                    <tr>
                        <th style="height:10">M</th>
                        <td class="row-m">A2<span>a</span></td>
                        <td>A1<span>b</span></td>
                        <td>A1<span>c</span></td>
                        <td>A1<span>c</span></td>
                        <td>A2<span>a</span></td>
                        <td>A2<span>b</span></td>
                        <td>A2<span>b</span></td>
                        <td>A2<span>c</span></td>
                        <td>A2<span>c</span></td>
                        <td>B1<span>a</span></td>
                        <td>B1<span>b</span></td>
                        <td>B1<span>b</span></td>
                        <td>B1<span>c</span></td>
                        <td>B2<span>a</span></td>
                        <td>B2<span>a</span></td>
                        <td>B2<span>b</span></td>
                        <td>B2<span>c</span></td>
                        <td>C1<span>a</span></td>
                        <td>C1<span>b</span></td>
                    </tr>
                    <tr>
                        <th style="height:10">M</th>
                        <td class="row-m">A2<span>b</span></td>
                        <td>A1<span>c</span></td>
                        <td>A1<span>c</span></td>
                        <td>A2<span>a</span></td>
                        <td>A2<span>a</span></td>
                        <td>A2<span>b</span></td>
                        <td>A2<span>c</span></td>
                        <td>A2<span>c</span></td>
                        <td>B1<span>a</span></td>
                        <td>B1<span>a</span></td>
                        <td>B1<span>b</span></td>
                        <td>B1<span>c</span></td>
                        <td>B1<span>c</span></td>
                        <td>B2<span>a</span></td>
                        <td>B2<span>b</span></td>
                        <td>B2<span>b</span></td>
                        <td>B2<span>c</span></td>
                        <td>C1<span>a</span></td>
                        <td>C1<span>b</span></td>
                    </tr>
                </table>
            </div>

            <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
            <script src="js/bootstrap.min.js" type="text/javascript"></script>
            <script src="js/jquery.sortelements.js" type="text/javascript"></script>
            <script src="js/jquery.bdt.min.js" type="text/javascript"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
            <script src="js/script.js"></script>
            <script src="js/jquery.bdt.min.js" type="text/javascript"></script>
    </body>
    <script>
        ////INSERIR OS DADOS NO INPUT "Mundlich" (LINHA HORIZONTAL)
        $(document).ready(function (e) {
            $("#m").keyup(function () {

                if ($(this).val() == "") {
                    $(".searchtbl").find("tr").not("tr:first").find("td").removeClass('highlighted');
                    return false;
                }
                var data = this.value.toUpperCase().split(" ");
                $(".searchtbl").find("tr").not("tr:first").find(".row-m").each(function (index, elem) {
                    var $elem = $(elem);
                    for (var d = 0; d < data.length; ++d) {
                        // Highlight
                        if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
                            $elem.addClass('highlighted');
                        } else {
                            $elem.removeClass('highlighted');
                        }
                        //console.log();

                        if ($elem.find(".inputType").length == 1) {

                            if ($elem.find(".inputType").val().toUpperCase().indexOf(data[d]) != -1) {
                                $elem.addClass('highlighted');
                                $elem.find(".inputType").addClass('highlighted');
                            } else {
                                $elem.removeClass('highlighted');
                                $elem.find(".inputType").removeClass('highlighted');
                            }
                        }

                    }
                })
            })
        });

        //INSERIR OS DADOS NO INPUT "Mundlich" (COLUNA VERTICAL)
        $(document).ready(function (e) {
            $("#s").keyup(function () {

                if ($(this).val() == "") {
                    $(".searchtbl").find("tr").not("tr:first").find("td").removeClass('highlighted');
                    return false;
                }
                var data = this.value.toUpperCase().split(" ");
                $(".searchtbl").find("tr").not("tr:first").find(".row-s").each(function (index, elem) {
                    var $elem = $(elem);
                    for (var d = 0; d < data.length; ++d) {
                        // Highlight
                        if ($elem.text().toUpperCase().indexOf(data[d]) != -1) {
                            $elem.addClass('highlighted');
                        } else {
                            $elem.removeClass('highlighted');
                        }
                        //console.log();

                        if ($elem.find(".inputType").length == 1) {

                            if ($elem.find(".inputType").val().toUpperCase().indexOf(data[d]) != -1) {
                                $elem.addClass('highlighted');
                                $elem.find(".inputType").addClass('highlighted');
                            } else {
                                $elem.removeClass('highlighted');
                                $elem.find(".inputType").removeClass('highlighted');
                            }
                        }

                    }
                })
            })
        });
    </script>

    </html>
4
  • Posta seu codigo por favor Commented 25/07/2019 às 21:50
  • Desculpe a bagunca na postagem, sou novo no StackOverflow. Commented 25/07/2019 às 22:13
  • Ele tem que preencher o último após selecionar ou digitar oque? Commented 25/07/2019 às 23:49
  • após os inputs text "Mundlich" e "Schriftlich" estiverem preenchidos Commented 28/07/2019 às 14:12

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .