I'm creating a table value that changes by id application with jquery and i don't know about jquery that much how can i change table row by id from input with jquery
note:i tested following code from another page but the code is like this
`<script>
$('#dicerik').html(icerik).find("#tablo2");
</script>`
i have tried something like this but i cant scope the real way this changes some other row
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<table>
<tr>
<th>İçerik</th>
<th>Tür</th>
<th>Dil</th>
</tr>
<tr>
<td>1</td>
<td>DENEXAMPLE</td>
<td>YineEXAMPLE</td>
</tr>
<tr>
<td>2</td>
<td>DENEXAMPLE2</td>
<td>YineEXAMPLE2</td>
</tr>
<tr>
<td>3</td>
<td>DENEXAMPLE3</td>
<td>YineEXAMPLE3</td>
</tr>
<tr>
<td>4</td>
<td>DENEXAMPLE4</td>
<td>YineEXAMPLE4</td>
</tr>
</table>
<input type="text" id="text1" name="text1" placeholder="id">
<input type="text" id="text2" name="text2" placeholder="text">
<button type="button" name="butonbu">Change it</button>
first input id of a row example 1 and its second text YineEXAMPLE
expected result is id 1 row and second text should be "dene"
Try this::
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<table>
<tr>
<th>İçerik</th>
<th>Tür</th>
<th>Dil</th>
</tr>
<tr>
<td>1</td>
<td>DENEXAMPLE</td>
<td>YineEXAMPLE</td>
</tr>
<tr>
<td>2</td>
<td>DENEXAMPLE2</td>
<td>YineEXAMPLE2</td>
</tr>
<tr>
<td>3</td>
<td>DENEXAMPLE3</td>
<td>YineEXAMPLE3</td>
</tr>
<tr>
<td>4</td>
<td>DENEXAMPLE4</td>
<td>YineEXAMPLE4</td>
</tr>
</table>
<input type="text" id="text1" name="text1" placeholder="id">
<input type="text" id="text2" name="text2" placeholder="text">
<button type="button" name="butonbu" onClick="changeIt()">Change it</button>
<script>
function changeIt()
{
$("table tr").each(function(index)
{
if (index != 0) {
$row = $(this);
var id = $row.find("td:first").text();
var searchID=$("#text1").val();
if(id==searchID)
{
$row.find("td:nth-child(2)").html($("#text2").val())
}
}
})
}
</script>
I suggest that you want to find a row in table by particular id and change 2nd or 3rd column, isn't it?
You need go through each row, get text from the first cell, if this text is equal to required value, you have to change the value in other cell.
You can do it with using this code:
$('button[name=butonbu]').click(function () {
var id = $('#text1').val();
var newText = $('#text2').val();
$('table tr').each(function (index, el) {
var $el = $(el);
if ($el.find('td:first').text() === id) {
$el.find('td:nth-child(2)').text(newText);
}
});
});
https://jsfiddle.net/js7yg631/7/
i do it with plain javascript
try this
<table>
<tr id="tr-0">
<th>İçerik</th>
<th>Tür</th>
<th>Dil</th>
</tr>
<tr id="tr-1">
<td>1</td>
<td>DENEXAMPLE</td>
<td>YineEXAMPLE</td>
</tr>
<tr id="tr-2">
<td>2</td>
<td>DENEXAMPLE2</td>
<td>YineEXAMPLE2</td>
</tr>
<tr id="tr-3">
<td>3</td>
<td>DENEXAMPLE3</td>
<td>YineEXAMPLE3</td>
</tr>
<tr id="tr-4">
<td>4</td>
<td>DENEXAMPLE4</td>
<td>YineEXAMPLE4</td>
</tr>
</table>
<input type="text" id="text1" name="text1" placeholder="id">
<input type="text" id="text2" name="text2" placeholder="text">
<input type="text" id="text3" name="text2" placeholder="text">
<button type="button" id="submit" name="butonbu">Change it</button>
<script>
const input1 = document.getElementById('text1')
const input2 = document.getElementById('text2')
const input3 = document.getElementById('text3')
document.getElementById('submit').addEventListener('click', changetarget)
function changetarget() {
if (input1.value != '' || input2.value != '' || input3.value != '') {
let parentTr = document.getElementById('tr-' + input1.value);
parentTr.children[1].innerHTML = input2.value;
parentTr.children[2].innerHTML = input3.value;
}
}
</script>
$(function(){
$('button[name=butonbu]').on("click", function(){
var id = $("#text1").val();
var replace_with = $("#text2").val();
$( "tr" ).each( function( index ) {
if(index !== 0){
var col_val = $(this).children("td").html();
if( col_val == id ){
$(this).children("td:nth-child(2)").html(replace_with);
}
}
});
});
});
Related
Here i'm trying to change the color based on value and rest of should be in white background, if input value is 1 then it should highlighted to red , if i changed the value to 4 then it should be highlighted in to red and rest of values 1 should be in white
I am still learning,Thanks in advance
<table>
<tr>
<td id="data1">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
</body>
<script>
function myFunction(){
if(document.getElementById('valuesData').value >= '9'){
document.getElementById('data1').style.background='red'
}
else{
alert("value should not be greater than 9");
}
}
</script>
You could use data attributes to see which td has a value of the entered text. It will change the background of entered value td.
Also before applying the background red to the entered value we can check all the tds and clear them with white background.
All the value entered in an input are string format so we need to use parseInt function to make sure they are converted to integar.
Live Demo:
function myFunction() {
//Get input value and convert to int using parseInt
let value = parseInt(document.getElementById('valuesData').value)
//Clear all the td with white background
let allTds = document.getElementsByTagName('td');
for (let i = 0; i < allTds.length; i++) {
allTds.item(i).style.background = 'white'
}
//Apply red background to the entered td with matching data-id
let getTd = document.querySelector('[data-id="' + value + '"]');
if (value <= '9') {
getTd.style.background = 'red'
} else {
alert("value should not be greater than 9");
}
}
<table>
<tr>
<td data-id="1">1</td>
<td data-id="2">2</td>
<td data-id="3">3</td>
</tr>
<tr>
<td data-id="4">4</td>
<td data-id="5">5</td>
<td data-id="6">6</td>
</tr>
<tr>
<td data-id="7">7</td>
<td data-id="8">8</td>
<td data-id="9">9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()">Click me</button>
<body>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
</body>
<script>
function myFunction(){
if(document.getElementById('valuesData').value >= 9){
document.getElementById('data1').style.background='red'
}
else{
alert("value should not be greater than 9");
}
}
</script>
You can get all tds and check if the user input matches with your td and based on you can change the color i.e. red and for rest of the tds make it white
function myFunction(){
var input = parseInt(document.getElementById('valuesData').value);
if(!isNaN(input) && input>=1 && input<=9)
document.getElementsByTagName('td')[input-1].style.background='red';
else
alert('invalid input')
let allTds = document.getElementsByTagName('td');
for(let i=0;i<allTds.length;i++){
if(i!==input-1){
allTds.item(i).style.background='white'
}
}
}
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me">Click</button>
</body>
function myFunction(){
const value= parseInt(document.getElementById('valuesData').value);
if( value<= 9){
const set=document.getElementsByClassName('data1')
for (item of set){
if(item.innerHTML==value){item.style.background='red'
}else item.style.background='white';
}
}
else{
alert("value should not be greater than 9");
}
}
<table>
<tr>
<td class="data1">1</td>
<td class="data1">2</td>
<td class="data1">3</td>
</tr>
<tr>
<td class="data1">4</td>
<td class="data1">5</td>
<td class="data1">6</td>
</tr>
<tr>
<td class="data1">7</td>
<td class="data1">8</td>
<td class="data1">9</td>
</tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
This should fix it. There were a few errors originally:
You were comparing the string value of the input to the string value '9' - the input should either be changed from text to number, or you should use parseInt as I have. Note, that entering a non-numeric value will cause an error unless it is checked for, so it's better to change the input field's type to number - also, you should compare to the numeric value 9, rather than the string value '9'
Your conditional was actually the wrong way around - i.e. >= should be <= in this case
Updated:
function myFunction() {
var val = document.getElementById('valuesData').value;
document.querySelectorAll("table td").forEach(function(td) {
td.style.background = "";
})
if (document.getElementById('valuesData').value != "" && parseInt(document.getElementById('valuesData').value) <= 9) {
val = parseInt(val);
document.querySelectorAll("table td")[val - 1].style.background = 'red';
} else {
alert("value should be between 1 and 9");
}
}
I have a problem here that when I click copy row and I want to get the remaining qty per item, the result is not accurate.
So let's just say the item mouse has 100 qty, and I inputted new qty for 50. So the remaining should be 50. And when I copied the item mouse and inputted 40, so the remaining now is 10. Same goes for other items. This should be the expected output.
Current Situation
JSFIDDLE
$('.qty').on("keyup", function() {
var id = $(this).data('id');
var value = $(this).val();
var sum = 0;
$("#table_name .qty").filter(function(){
if ($(this).data("id") == id){
sum += parseFloat(value);
}
});
console.log(sum);
$('.remaining').val(sum);
});
Your overall logic is REALLY unclear. Here is an example that might help.
$(function() {
function refreshIndex($t) {
$('tbody tr', $t).each(function(i, el) {
var c = i + 1;
var select = $(this).find('td:eq(0)').text(c);
});
}
function copyRow(e) {
var self = $(e.target);
var row = self.closest("tr");
row.clone().appendTo(self.closest("tbody"));
refreshIndex($("#table_name"));
}
function updateItem(e) {
var self = $(e.target);
var row = self.closest("tr");
var p = parseInt(self.val());
var q = parseInt(row.find("td:eq(2) input").val());
$('.remaining', row).val(q - p);
}
$("#table_name tbody").on("keyup", '.price', updateItem);
$("#table_name tbody").on('click', '.copy', copyRow);
});
#table_name tr td input {
width: 4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_name">
<thead>
<tr>
<th>No</th>
<th>Item</th>
<th>Total</th>
<th>Qnty</th>
<th>Action</th>
<th>Remaing</th>
</tr>
</thead>
<tbody>
<tr class="trs" id="tr-1">
<td>1</td>
<td>Mouse</td>
<td><input type="text" value="100" readonly></td>
<td><input type="text" class="price" data-id="79"></td>
<td><button class="copy" id="copy-1">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
<tr class="trs" id="tr-2">
<td>2</td>
<td>Keyboard</td>
<td><input type="text" value="20" readonly></td>
<td><input type="text" class="price" data-id="80"></td>
<td><button class="copy" id="copy-2">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
<tr class="trs" id="tr-3">
<td>3</td>
<td>Monitor</td>
<td><input type="text" value="50" readonly></td>
<td><input type="text" class="price" data-id="81"></td>
<td><button class="copy" id="copy-3">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
</tbody>
</table>
When I enter 40 under Price, 60 appears as the difference between the Quantity and the Amount entered.
When Copy is clicked, a new row is appended, and functionality is binded to it already due to use of .on().
Hope that helps.
Basically you can use the data-id attribute to target the rows you actually want to update.
var clone_controll = function(num) {
//Needed to mod this so add rows have the event handler
$('#table_name').on("keyup", ".qty", function() {
var id = $(this).data('id');
var value = $(this).val();
var sum = 0;
//Filter is the wrong choice here - it is designed to filter objects
/*$("#table_name .qty").filter(function(){
if ($(this).data("id") == id){
//I think this logic is incorrect as well
//You are only getting the value from the
//field you are typing in
sum += parseFloat(value);
}
});*/
/*Use a better selector with each()*/
$("#table_name [data-id=" + id +"]").each(function(){
//In this context "this" is the item iterated in "each"
sum += parseFloat($(this).val());
console.log(sum);
});
console.log("Final: " + sum);
//Here is your problem, this updates All "remaining fields
//$('.remaining').val(sum);
//All rows contiaining this data id
var relevantRows = $("[data-id=" + id + "]").closest("tr");
//Update the "remaining fields in those rows
$(relevantRows).find(".remaining").val(sum);
});
}
clone_controll();
var $tableBody = $('#table_name').find("tbody");
clickEvent();
function clickEvent(){
$tableBody.find('.copy').off('click').on('click',function() {
$trLast = $(this).closest('tr'),
$trNew = $trLast.clone();
$trLast.after($trNew);
clickEvent();
clone_controll();
});
function refresh_index(){
$('#table_name > tbody > tr').each(function (i) {
i++;
var select = $(this).find('td').eq(0).text(i);
});
}
refresh_index();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="table_name">
<thead>
<tr>
<th>No</th>
<th>Item</th>
<th>Qty</th>
<th>Your Qty</th>
<th>Action</th>
<th>Remaing per item(not per row)</th>
</tr>
</thead>
<tbody>
<tr class="trs" id="tr-1">
<td>1</td>
<td>Mouse</td>
<td><input type="text" value="100" readonly></td>
<td><input type="text" class="qty" data-id="79"></td>
<td><button class="copy" id="copy-1">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
<tr class="trs" id="tr-2">
<td>2</td>
<td>Keyboard</td>
<td><input type="text" value="20" readonly></td>
<td><input type="text" class="qty" data-id="80"></td>
<td><button class="copy" id="copy-2">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
<tr class="trs" id="tr-3">
<td>3</td>
<td>Monitor</td>
<td><input type="text" value="50" readonly></td>
<td><input type="text" class="qty" data-id="81"></td>
<td><button class="copy" id="copy-3">Copy</button></td>
<td><input type="text" class="remaining"></td>
</tr>
</tbody>
</table>
Your logic is still pretty unclear, but hopefully this gets you moving in the right direction.
Any help would be greatly appreciated.
What I'm trying to achieve is when a number/text in input into the code box it searches the table, if found increments quantity by one, if not found adds a new row counting the no column by one.
I already a some basic jQuery code.
<input type="text" style="width: 200px" id="code" name="code" />
<input id = "btnSubmit" type="submit" value="Release"/>
<table> <thead>
<tr>
<th>No</th>
<th>Code</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4444</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>5555</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>6666</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>7777</td>
<td>1</td>
</tr>
</tbody>
</table>
edit: my code.
$(document).ready(function() {
$("#btnSubmit").click(function() {
var code = $("input#code").val()
var table = $("table tbody");
table.find('tr').each(function(i) {
no = $(this).find('td').eq(0).text(),
productId = $(this).find('td').eq(1).text(),
Quantity = $(this).find('td').eq(2).text();
if (productId == code) { //see if product is in table
Quantity = +Quantity + +Quantity; // increase qty
alert('found' + Quantity);
} else {
// Add new row
alert('not found');
}
});
});
});
I put together a JSFiddle for you, and copied the JS code here. I tried to make it as beginner friendly as possible...
$("#btnSubmit").on("click", function(){
numRows = $("tr").length;
for(var i=1 ; i<numRows ; i++){
var code = $("tr:nth-child(" + i + ") td:nth-child(2)").html();
var qty = $("tr:nth-child(" + i + ") td:nth-child(3)").html();
if(code == $("#code").val()){
$("tr:nth-child(" + i + ") td:nth-child(3)").html(parseInt(qty) + 1);
return true;
}
}
$("tbody").append("<tr><td>" + numRows + "</td><td>" + $("#code").val() + "</td><td>1</td></tr>");
return true;
});
I have created a sample code using jQuery. It took me like 10 minutes to figure out what you are trying to achive but I hope I understood you quite well:
HTML Side:
<input type="text" style="width: 200px" id="code" name="code" />
<input id = "btnSubmit" type="submit" value="Release"/>
<table> <thead>
<tr>
<th>No</th>
<th>Code</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4444</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>5555</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>6666</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>7777</td>
<td>1</td>
</tr>
</tbody>
</table>
and our JavaScript:
$(document).ready(function() {
var found = false;
$("input#btnSubmit").on("click", function() {
var search_val = $("input#code").val();
$("tr").each(function() {
var obj = $(this);
obj.find("td").each(function() {
if(parseInt($(this).html()) == parseInt(search_val))
{
obj.find("td:nth-of-type(3)").html(parseInt(obj.find("td:nth-of-type(3)").html()) + 1);
found = true;
}
});
})
if(found == false)
{
$("table").append("<tr><td>"+($("tr").length)+"</td><td>"+search_val+"</td><td>1</td></tr>");
}
found = false;
});
});
Here's JSFiddle: http://jsfiddle.net/f17gudfw/4/
I've got a page with a handful of input fields.
I need to find the fields with an array of values, and if so, .remove() the closest('tr')
The markup is similar to this
<table>
<tr>
<td>
<input type="text" value="this">
</td>
</tr>
<tr>
<td>
<input type="text" value="that">
</td>
</tr>
<tr>
<td>
<input type="text" value="them">
</td>
</tr>
</table>
I need to find "this" and "that", and if they are there, remove their <tr> container (and themselves) so I'd end up with:
<table>
<tr>
<td>
<input type="text" value="them">
</td>
</tr>
</table>
I've tried this:
jQuery(document).ready(function($){
var badfields = ['this', 'that'];
var fieldvalue = $('input[type="text"]').val();
if($.inArray(fieldvalue, badfields) > -1){
$(this).closest('tr').remove();
}
});
but it doesn't seem to want to work?
You need to iterate over all the fields using .each, so something like this:
$('input[type="text"]').each(function() {
var fieldvalue = $(this).val();
if ($.inArray(fieldvalue, badfields) > -1) {
$(this).closest('tr').remove();
}
});
Example: jsfiddle
You can be very concise sometimes with jQuery. jQuery has content selectors you can use for this type of purpose:
$("input[type=text][value=this], [value=that]").parents("tr").remove();
since you don't necessarily know this or that beforehand, you can do something like this:
var badfields = ['this', 'that'];
$(badfields).each(function(i) {
$("input[type=text][value=" + this + "]").parents("tr").remove();
});
You can use each to iterate through the selector. this in your inArray scope is not the element you were looking for.
DEMO: http://jsfiddle.net/
html:
<table>
<tr>
<td>
<input type="text" value="this">
</td>
</tr>
<tr>
<td>
<input type="text" value="that">
</td>
</tr>
<tr>
<td>
<input type="text" value="them">
</td>
</tr>
</table>
js:
jQuery(document).ready(function($){
var badfields = ['this', 'that'];
$('input[type="text"]').each(function(){
if( $.inArray(this.value, badfields) > -1 ){
$(this).closest('tr').remove();
}
});
});
Edit: I have solved this by myself. See my answer below
I have set up a nice sortable table with jQuery and it is quite nice. But now i want to extend it.
Each table row has a text box, and i want i am after is to, every time a row is dropped, the text boxes update to reflect the order of the text boxes. E.g. The text box up the top always has the value of '1', the second is always '2' and so on.
I am using jQuery and the Table Drag and Drop JQuery plugin
Code
Javascript:
<script type = "text/javascript" >
$(document).ready(function () {
$("#table-2").tableDnD({
onDrop: function (table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Order: ";
for (var i = 0; i < rows.length; i++) {
debugStr += rows[i].id + ", ";
}
console.log(debugStr)
document.forms['productform'].sort1.value = debugStr;
document.forms['productform'].sort2.value = debugStr;
document.forms['productform'].sort3.value = debugStr;
document.forms['productform'].sort4.value = debugStr;
},
});
});
</script>
HTML Table:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr>
<td>Product</td>
<td>Order</td>
</tr>
</thead>
<tbody>
<tr class="row1" id="Pol">
<td>Pol</td>
<td><input type="textbox" name="sort1"/></td>
</tr>
<tr class="row2" id="Evo">
<td>Evo</td>
<td><input type="textbox" name="sort2"/></td>
</tr>
<tr class="row3" id="Kal">
<td>Kal</td>
<td><input type="textbox" name="sort3"/></td>
</tr>
<tr class="row4" id="Lok">
<td>Lok</td>
<td><input type="textbox" name="sort4"/></td>
</tr>
</tbody>
</table>
</form>
Hardnrg in #jquery ended up solving it for me.
It involved adding an id="" to each input:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr><td>Product</td> <td>Order</td></tr>
</thead>
<tbody>
<tr class="row1" id="Pol"> <td>Pol</td> <td><input id="Pol_field" type="textbox" name="sort1"/></td> </tr>
<tr class="row2" id="Evo"> <td>Evo</td> <td><input id="Evo_field" type="textbox" name="sort2"/></td> </tr>
<tr class="row3" id="Kal"> <td>Kal</td> <td><input id="Kal_field" type="textbox" name="sort3"/></td> </tr>
<tr class="row4" id="Lok"> <td>Lok</td> <td><input id="Lok_field" type="textbox" name="sort4"/></td> </tr>
</tbody>
</table>
</form>
And add this js to the OnDrop event:
for (var i=0; i < rows.length; i++) {
$('#' + rows[i].id + "_field").val(i+1);
}
Easy peasy!
Hmmm..
I think you want to do something like this:
$("input:text", "#table-2").each( function(i){ this.value=i+1; });
The $().each() function's info is here: http://docs.jquery.com/Core/each