selector column table jquery - javascript

Hello everyone I hope you can help me
I have the code that I need to do this by column. It currently just lets me select a number, not all.
I have tried in various ways, but I still can not find the solution.
Thank you
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
if ($(this).css("background-color") != "rgb(26, 179, 148)") {
$(this).css("background-color", "rgb(26, 179, 148)");
$(this).css("color", "white");
} else {
$(this).css("background-color", "rgb(255,255,255)");
$(this).css("color", "#676a6c");
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>

Assuming:
In the first column the numbers 6 and 5 are shown if you click on one of them you select [it] - what I need is that it only lets me select a single number per column, that is to say that in that column it only lets me select the 6 or the 5
This also assumes that
you want to keep your existing HTML
(see #ksav's answer for an alternative that uses data- attributes to group similar data)
When you select/click one, it needs to turn off any others. This is much easier using classes than setting colours directly:
$(".row_number").on("click", function(e) {
$(".row_number").removeClass("selected");
$(this).addClass("selected");
})
this will work for all .row_number, but your requirement is / appears to be within a single column, which is a bit trickier:
You need to find which column has been clicked, then remove the class from only cells in that column:
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
Giving:
$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
})
.selected { background-color: rgb(26,179,148); color:white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>

$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
})
.selected {
background-color: rgb(26, 179, 148);
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>

Related

ng-repeat used to display data, when data is updated via the save button, how do I update the ng-repeat without updating the entire page?

This is the div that contains the HTML with the list:
<div id="searchResults" class="container-fluid">
<table ng-show="HasMyData()" class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="text-center smalltext bold">Version</th>
<th class="text-center smalltext bold">City</th>
<th class="smalltext bold">Description</th>
<th class="text-center smalltext bold">Food</th>
<th class="text-center smalltext bold">Lizard</th>
<th class="text-center smalltext bold">Lost</th>
<th class="text-center smalltext bold">Complete</th>
<th class="text-center smalltext bold">Active</th>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer;" ng-class="{ selectedrow: isSelectedReg($id) }" ng-click="GetDetails(data,$id)" ng-show="numberOfRecords != 0"
ng-repeat="data in myData |
filter:{'name':FilterByDescription(search.val)} |
filter:{'isFood':FilterIsFood} |
filter:{'isLizard':FilterIsLizard} |
filter:{'isLost':FilterIsLost} |
filter:{'reviewCompleted':FilterByComplete()} |
filter:{'activeInd':FilterByInactive() }">
<td class="text-center smalltext">{{data.versionNumber}}</td>
<td class="text-center smalltext">{{data.cityName}}</td>
<td class="smalltext">{{data.name}}</td>
<td class="text-center"><input type="checkbox" ng-checked="data.isFood" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.isLizard" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.isLost" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.reviewCompleted" disabled></td>
<td class="text-center"><input type="checkbox" ng-checked="data.activeInd" disabled></td>
</tr>
<tr ng-show="numberOfRecords == 0">
<td colspan="5">NO RECORDS FOUND</td>
</tr>
</tbody>
</table>
</div>
The data is updated via a form, and then the above div/ng-repeat should be reloaded after the update. I've read a few posts that say it should be automatic...but it's not happening.

How to use a second column to sort if first column show equal values

We have a table that shows teams standings.
Now currently we are using jQuery to sort based on points -> "PTS"
However there are cases like the image above where the points are equal (like the two last teams) in this case to see who should go first we must look at the F column and in this case "Dubai Stallions" should go above the "Abu Dhabi Capitals".
Our code is currently like this:
<script type="text/javascript">
$(document).ready(function(){
$('div.standing table>tbody > tr:not(:first-child)').sort(function (a, b) {
return +$('td:eq(5)', b).text() > +$('td:eq(5)', a).text();
}).appendTo('tbody');
});
</script>
and we have for the table
<div class="standing">
<table class="uppercased">
<tr>
<th style="width:26%">teams</th>
<th style="width:6%">gp</th>
<th style="width:6%">w</th>
<th style="width:6%">l</th>
<th style="width:6%">t</th>
<th style="width:6%">pts</th>
<th style="width:6%">f</th>
<th style="width:6%">a</th>
<th style="width:8%">Standing</th>
<th style="width:8%">strk</th>
</tr>
With similar below it.
Can anyone help with adjusting the jQuery?
URL: https://www.eafl.ae/standing?division=varsity
Thanks.
You can do a if condition. If points are equal, use the f column to sort.
Here is a snippet.
$(function() {
$('div.standing table>tbody > tr:not(:first-child)').sort(function(a, b) {
if (+$('td:eq(5)', b).text() != +$('td:eq(5)', a).text()) // Check if PTS column is not equal
return +$('td:eq(5)', b).text() > +$('td:eq(5)', a).text(); // Use PTS column since they are not equal
else
return +$('td:eq(6)', b).text() > +$('td:eq(6)', a).text(); // Sincne PTS column are equal, use the f column
}).appendTo('tbody');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="standing">
<table class="uppercased">
<tr>
<th style="width:26%">teams</th>
<th style="width:6%">gp</th>
<th style="width:6%">w</th>
<th style="width:6%">l</th>
<th style="width:6%">t</th>
<th style="width:6%">pts</th>
<th style="width:6%">f</th>
<th style="width:6%">a</th>
<th style="width:8%">Standing</th>
<th style="width:8%">strk</th>
</tr>
<tr>
<td style="width:26%">Team 1</td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%">3</td>
<td style="width:6%">7</td>
<td style="width:6%"></td>
<td style="width:8%"></td>
<td style="width:8%"></td>
</tr>
<tr>
<td style="width:26%">Team 1</td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%">12</td>
<td style="width:6%">86</td>
<td style="width:6%"></td>
<td style="width:8%"></td>
<td style="width:8%"></td>
</tr>
<tr>
<td style="width:26%">Team 1</td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%"></td>
<td style="width:6%">3</td>
<td style="width:6%">33</td>
<td style="width:6%"></td>
<td style="width:8%"></td>
<td style="width:8%"></td>
</tr>
</table>
</div>

I am unable to click on datepicker element in protractor, how to click on date if the field is non-editable?

DatePicker field is non-editable and I cannot send data using sendkeys. The only way is to click on the date. I have tried many options but nothing is working.
I want to click on tomorrow's date that's today+1 date. Please see this code:
<input id="asOfDate" name="asOfDate" placeholder="Enter Date" readonly="true" ng-model="asOfDate" class="form-control date-picker asOfDate ng-pristine ng-valid ng-valid-pattern ng-touched" type="text" ng-pattern="/^([0]?\d{1}|[1][0-2])\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([1-9]{1}\d{3}))$/" style="">
#addeventModal > div > div > div.modal-body.modal-body-height > form > div.row > div > div > span
<span ng-show="AddTimeLine.asOfDate.$error.pattern" class="text-danger ng-hide">Incorrect Format, should be MM/DD/YYYY</span>
<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<thead>
<tr>
<th class="cw"> </th>
<th class="prev" style="visibility: visible;">
«</th>
<th colspan="5" class="datepicker-switch">October 2017</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
<tr>
<th class="cw"> </th>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cw">39</td>
<td class="old day">24</td>
<td class="old day">25</td>
<td class="old day">26</td>
<td class="old day">27</td>
<td class="old day">28</td>
<td class="old day">29</td>
<td class="old day">30</td>
</tr>
<tr>
<td class="cw">40</td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
<td class="day">7</td>
</tr>
<tr>
<td class="cw">41</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
<td class="day">14</td>
</tr>
<tr>
<td class="cw">42</td>
<td class="day">15</td><td class="day">16</td>
<td class="day">17</td><td class="day">18</td><td class="day">19</td>
<td class="day">20</td><td class="day">21</td></tr>
<tr><td class="cw">43</td><td class="day">22</td>
<td class="day">23</td><td class="day">24</td>
<td class="day">25</td><td class="day">26</td>
<td class="day">27</td><td class="day">28</td>
</tr><tr><td class="cw">44</td><td class="day">29</td>
<td class="day">30</td><td class="day">31</td>
<td class="new day">1</td>
<td class="new day">2</td>
<td class="new day">3</td>
<td class="new day">4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="8" class="today" style="display: table-cell;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div>
How to write code for this?
Add days to JavaScript Date
Add a day with the help of above question
After that retrive the day
var day = todayTime.getDate();
Since you have will have only one month displayed, all dates will be unique.
So your xpath would be
//td[#class="day"][text()=day]
You should be able to click with below code
WebElement button = driver.findElement(By.xpath("//td[#class="day"][text()=day]
"));
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].click();", button);
I suggest using javascript executor since there might be a overlay window
browser.executeScript("arguments[0].click();",element(by.xpath("[//td[#class="day"][text()=day]")).getWebElement());
Ps : here pass the current day as day variable.

Show in jQuery seach the closest TR that was a header from data

This is my fiddle: https://jsfiddle.net/qpouvped/2/
What I want to do is display the header with the corresponding alphabetical letter of the searched name. But I had no success!
If you see the code and look for "Nanana", I want to display this line, and the gray header C, of which "Nanana" belongs.
Can anyone help me with this?
My HTML:
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td >137418</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">C</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr>
<td >133</td>
<td >Nanana Nonono Nonono</td>
<td >11225566</td>
</tr>
</tbody>
</table>
My jQuery:
$(".filter-nome").keyup(function(){
var value = $(this).val();
$(".lista-certidoes tbody tr").each(function(index){
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(value) != 0) {
$(this).hide();
} else {
$(this).show();
//$(this).parent('tbody').next('td.cab_interno').show();
}
});
});
The alphabetic heading is a previous sibling of the closest tr, so you want to use .prevAll(). These are returned in order of distance from the current row, so the first one will be the heading for that group.
You also shouldn't process the heading rows in the .each() loop. Just hide everything first, and show the data rows that match, along with their headings.
$(".filter-nome").keyup(function() {
var value = $(this).val();
if (value == "") {
// Show everything when filter is empty
$(".lista-certidoes tbody tr").show();
return;
}
$(".lista-certidoes tbody tr").hide();
$(".lista-certidoes tbody tr:not(.subtitulo)").each(function(index) {
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(value) == 0) {
$row.show();
$row.closest("tr").prevAll(".subtitulo").first().show();
}
});
});
.lista-certidoes {
.cab_interno {
background-color: #333;
color: #fff;
text-align: center;
padding: 8px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td>137418</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td>122222</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">C</td>
</tr>
<tr>
<td>122222</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr>
<td>133</td>
<td>Nanana Nonono Nonono</td>
<td>11225566</td>
</tr>
</tbody>
</table>

How to save edited data from a table back to the database with jquery

I have a table where users can click on the row and then edit the row. I want to now be able to save it back to the database. How can I do this? I'm just not sure how to create the ajax call to run it.
// overlay functions
function openOverlay(){
document.getElementById("pageOverlay").style.visibility = "visible";
}
function closeOverlay(){
document.getElementById("pageOverlay").style.visibility = "hidden";
}
// show row data to be edited or view single row
$(".rowEditData").click(function() {
html = "<div id='editableTableDiv'><label class='editRowLabel'>Shape Name:</label> <input type='text' class='mdl-textfield__input' name='shapeName' value="+ $(this).find('td').eq(0).html() + "><br><label class='editRowLabel'>Number Edges:</label> <input type='text' class='mdl-textfield__input' name='numberEdges' value="+ $(this).find('td').eq(1).html() + "><br><label class='editRowLabel'>Sum of Interior Angles:</label> <input type='text' class='mdl-textfield__input' name='sumAngles' value="+ $(this).find('td').eq(2).html() + "><br><br><input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Save' onclick='saveNewRowData()'> <input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Close' onclick='closeOverlay()'></div>";
$("#pageOverlay").html(html).show();
openOverlay();
});
function saveNewRowData(){
shapeName = $("input[name=shapeName]").val();
numberEdges = $("input[name=numberEdges]").val();
sumAngles = $("input[name=sumAngles]").val();
$.ajax({
url: "someURLhere.php",
data: data,
type: "post"
});
}
#pageOverlay {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.25);
z-index: 99;
}
#pageOverlay div {
padding: 1%;
width: 30%;
height: 80%;
margin: 100px;
margin-left: 35%;
background-color: rgb(255, 255, 255);
}
.editRowLabel {
font-weight:bold;
font-size:16px;
}
<link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay"></div>
<table id="dataTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp dataTable no-footer" role="grid">
<thead>
<tr role="row">
<th class="mdl-data-table__cell--non-numeric sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Shape Name: activate to sort column descending" style="width: 401px;">Shape Name</th>
<th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Number Edges: activate to sort column ascending" style="width: 436px;">Number Edges</th>
<th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Sum of Interior Angles: activate to sort column ascending" style="width: 638px;">Sum of Interior Angles</th>
</tr>
</thead>
<tbody>
<tr class="rowEditData odd" value="7924" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Hexagon</td>
<td class="mdl-data-table__cell--non-numeric">6</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7923" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">6</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7930" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">3</td>
<td class="mdl-data-table__cell--non-numeric">180</td>
</tr>
<tr class="rowEditData even" value="7931" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">360</td>
</tr>
<tr class="rowEditData odd" value="7932" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">5</td>
<td class="mdl-data-table__cell--non-numeric">540</td>
</tr>
<tr class="rowEditData even" value="7933" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">6</td>
<td class="mdl-data-table__cell--non-numeric">120</td>
</tr>
<tr class="rowEditData odd" value="7934" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">10</td>
<td class="mdl-data-table__cell--non-numeric">1440</td>
</tr>
<tr class="rowEditData even" value="7925" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Octagon</td>
<td class="mdl-data-table__cell--non-numeric">8</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7922" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">pentagon</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7926" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Pentagon</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7920" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">square</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7927" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Square</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7928" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Square</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7921" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">trapezoid</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7919" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">triangle</td>
<td class="mdl-data-table__cell--non-numeric">3</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7929" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Triangle</td>
<td class="mdl-data-table__cell--non-numeric">3</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
</tbody>
</table>
One thing you would need connection to the database
you will need to ajax each row
$(document).ready(function()
{$('#btn').click(function(e) {
e.preventDefault();
$('#yourTable tr').each(function(i, tr) {
var postData = {
CoumnName : $('.row-class').val(),
ColumnName : $('.row-class').val()
}
console.log(postData);
$.ajax({
type: "post",
url: "/your url",
data: postData
})
.done(function(response) {
console.log(response);
alert("Success!");
})
.fail(function(x, status, error) {
alert("Error: " + error);
});
});
});
});
Here is what I came up with that works. I just use a php script to then save the data to the database.
function saveNewRowData(){
shapeName = $("input[name=shapeName]").val();
numberEdges = $("input[name=numberEdges]").val();
sumAngles = $("input[name=sumAngles]").val();
$.ajax({
type: "POST",
url: "saveNewData.php",
data: {shapeName: shapeName, numberEdges: numberEdges, sumAngles: sumAngles},
success: function(response){
}
});
}

Categories