1
Take the cell value of a Javascript table
[Help] I need to insert the node value automatically into the last input text "Gesamt" after entering any value from the first vertical column, within the input text "Mundlich" and the first horizontal line, within the input text "Schriftlich". That is.. I need to take the index value of the node that crosses a value between the first line and the first column.
<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>
Put your code in please
– Eduardo Vargas
Sorry about the posting, I’m new to Stackoverflow.
– Mauro Silva
It has to fill in the last one after selecting or typing that?
– Lucas Antonio
after the inputs text "Mundlich" and "Schriftlich" are completed
– Mauro Silva