Getting tables div content when pressed button into input - javascript

I want to get contents of each rows and write it in input but i can't do this work.
<table>
<tbody>
<tr>
<td>
<div id="a">abc</div>
</td>
</tr>
<tr>
<td>
<div id="b">abcd</div>
</td>
</tr>
<tr>
<td>
<div id="c">abcdf</div>
</td>
</tr>
<tr>
<td>
<div id="d">abcde</div>
</td>
</tr>
<tr>
<td>
<button class="magicButton">choose this row</button>
</td>
</tr>
</tbody>
</table>
$(document).ready(function(){
$('.magicButton').click(function(){
// insert text of div a into input
// insert text of div b into input
// ect
});
});
Once you press the button it gets this values into following
<input type="text" name="whatver" div="fromValueA" readonly>
<input type="text" name="whatver" div="fromValueB" readonly>
<input type="text" name="whatver" div="fromValueC" readonly>
<input type="text" name="whatver" div="fromValueD" readonly>
How exactly can I get this to not just use the same A, B ,C from all buttons that are made
Best wishes, Mike


Use jquery replaceWith() method to replacing div with input.
$("button").click(function(){
$("table td > div").replaceWith(function(index, text){
var id = "fromValue" + $(this).attr("id");
return "<input id='" + id + "' value='" + text + "' />";
});
});
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div id="a">A</div>
</td>
</tr>
<tr>
<td>
<div id="b">B</div>
</td>
</tr>
<tr>
<td>
<div id="c">C</div>
</td>
</tr>
<tr>
<td>
<button>Change</button>
</td>
</tr>
</table>

Related

Add row and td element and a checkbox in the table

I have the following table structure
<form method=POST class='form leftLabels'>
<table >
<tr >
<th >Code:</th>
<td ><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr ><th >Name:</th>
<td ><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
// <<<< Here I would like to add a row
<tr >
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>
The row that I am trying to add should have the following html:
<tr>
<th> Delete the record?</th>
<td><input type='checbox' name='delete' value=1></td>
</tr>
I have the following Javascript / jQuery code:
var trCnt=0;
$('table tr').each(function(){
trCnt++;
});
rowToInsertCheckbox = trCnt - 1;
$('table').after(rowToInsertCheckbox).append(
$(document.createElement('tr')),
$(document.createElement('td').html('Delete the record'),
$(document.createElement('td').html('Checkbox here?')),
);
which does find the right row after which the insert should be done, but the code does not work.

after() adds the new content after the target element, but outside it. tr need to be inside the table. In addition you need to append the td to the tr, not the table.
To place the new tr in your target position you can select the last tr in the table and use insertBefore(), like this:
let $newRow = $('<tr />').insertBefore('table tr:last');
$('<td>Delete the record?</td>').appendTo($newRow);
$('<td><input type="checkbox" name="delete" value="1"></td>').appendTo($newRow);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="form leftLabels">
<table>
<tr>
<th>Code:</th>
<td><input type="text" name="f[id]" size="60" value="10" /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type="text" name="f[name]" size="60" value="Aa" /></td>
</tr>
<tr>
<td class="nogrid buttonsClass"><button type="submit">Save</button></td>
</tr>
</table>
</form>

One way to locate the row after which the content should be added is:
var tr = $("th").filter(function () {
return $(this).text() == "Name:";
}).closest("tr");
Then add the row:
$(tr).after("<tr><th> Delete the record?</th><td><input type='checkbox' name='delete' value=1></td></tr>");
$(document).ready(function() {
var tr = $("th").filter(function() {
return $(this).text() == "Name:";
}).closest("tr");
$(tr).after("<tr><th>Delete the record?</th>" +
"<td><input type='checkbox' name='delete' value=1></td>" +
"</tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method=POST class='form leftLabels'>
<table>
<tr>
<th>Code:</th>
<td><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
<tr>
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>

How to get input value (without ID) from table

I have an input tag on table :
example :
<table border="1" id="datatable">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' name="a[]" value="a1">
</td>
<td>
<input type='text' name="b[]" value="b1">
</td>
<td>
<input type='text' name="b[]" value="c1">
</td>
</tr>
<tr>
<td>
<input type='text' name="a[]" value="a2">
</td>
<td>
<input type='text' name="b[]" value="b2">
</td>
<td>
<input type='text' name="c[]" value="c2">
</td>
</tr>
</tbody>
I want to get value from input using javascript.
I have try :
var x = document.getElementById("datatable").rows[1].cells;
alert(x[1].innerHTML);
but the result is :
<input type='text' value="a">
please help. thank you

This is invalid html. Each input element should have a name attribute this is how the forms data is submitted. Then you could use value=document.querySelector("input[name='fred']").value;
Edit
Since you are using brackets (and therefore sending back array value with same name) you will need to use:
// create array for values
a_s_array = [];
// get input values
a_s = document.querySelectorAll("input[name='a[]']");
// loop through elements
for( var x=0; x<a_s.length; x++ ) {
// store input value into array
a_s_array.push( a_s[x].value );
}

Try this:-
var x = document.getElementById("datatable").rows[1].cells;
alert(x[0].children[0].value);

You can try this jquery code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<table border="1" id="datatable">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' name="a[]" value="a1">
</td>
<td>
<input type='text' name="b[]" value="b1">
</td>
<td>
<input type='text' name="b[]" value="c1">
</td>
</tr>
<tr>
<td>
<input type='text' name="a[]" value="a2">
</td>
<td>
<input type='text' name="b[]" value="b2">
</td>
<td>
<input type='text' name="c[]" value="c2">
</td>
</tr>
</tbody>
<script>
$(document).ready(function(){
var td = $("#datatable").find('td');
$.each(td, function() {
alert($(this).find('input[type="text"]').val());
});
});
</script>
</body>
</html>

Cannot set property of undefined (input[text] value)

I can't get the value property from input[type='text'] #page-name and #page-url, it shows up undefined :
eventsDispatcher: function() {
var self = this;
$(".b-row a").click(function() {
var tileId = ("this").id;
$("#tile-edit").css("display", "block");
$("#tile-edit-save").click(function() {
self.pageList[tileId].name = $("#page-name").val(); // -> here
self.pageList[tileId].url = $("#page-url").val(); // -> here
console.log(self.pageList[tileId].name);
});
});
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tile-edit">
<form>
<table>
<tr>
<td>
<label for="page-url">Adress</label>
</td>
<td>
<input type="text" name="page-url" id="page-url" class="">
</td>
</tr>
<tr>
<td>
<label for="page-name">Name</label>
</td>
<td>
<input type="text" name="page-name" id="page-name" class="">
</td>
</tr>
<tr>
<td>
<input type="button" id="tile-edit-save" value="save">
</td>
</tr>
</table>
</form>
</div>
The rest of the script is working fine, like the both .click functions, just can't figure out why it doesn't get the #page-name and #page-url values ??

I'm just guessing, but ("this").id should be undefined. You might want to change it for:
var tileId = $(this).attr('id');

I believe you have special characters in your HTML. I copied and pasted it to/from a plain text editor and it works fine. Try copying and pasting the form HTML here.
$('#tile-edit-save').on('click',function() {
console.log($("#page-name").val())
console.log($("#page-url").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><label for="page-url">Adress</label></td>
<td><input type="text" name="page-url" id="page-url" class=""></td>
</tr>
<tr>
<td><label for="page-name">Name</label></td>
<td><input type="text" name="page-name" id="page-name" class=""></td>
</tr>
<tr>
<td><input type="button" id="tile-edit-save" value="save"></td>
</tr>
</table>
</form>

Using jQuery to find the selected value between the td and the div

The function below is used to find the reference number then compare it, then if the corresponding value is found the cell values are modified according to the input boxes. This works great, however, how do I go about modifying the existing function below to capture the value between the
<td><div>this value here</div></td>
Here is the Javascript in question:
function changeit() {
var valueToFind = $('#number').val();
$('#data > tbody> tr').each(function(index) {
console.log(index);
var firstTd = $(this).find('td:first');
if ($(firstTd).text() == valueToFind) {
console.log("found: " + index + ":" + valueToFind);
$(this).find('td:eq(1)').text($('#item').val());
$(this).find('td:eq(2)').text($('#color').val());
}
})
}
Here is the HTML Markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
</head>
<body>
Number:*
<input type="text" id="number">
<br> Items:
<input type="text" id="item">
<br> Color:
<input type="text" id="color">
<br>
<br>
<input type="button" onclick="changeit()" value="save">
<br>
<table id="data" style="width: 100%" cellspacing="1" class="style1">
<tr>
<td>
<div><b>Number*</b></div>
</td>
<td>
<div><b>items</b></div>
</td>
<td>
<div><b>Colors</b></div>
</td>
</tr>
<tbody>
<tr>
<td>
<div>
<div>123</div>
</div>
</td>
<td>
<div>Boats</div>
</td>
<td>
<div>red</div>
</td>
</tr>
<tr>
<td>
<div>456</div>
</td>
<td>
<div>Vehicles</div>
</td>
<td>
<div>blue</div>
</td>
</tr>
<tr>
<td>
<div>789</div>
</td>
<td>
<div>Motorcycles</div>
</td>
<td>
<div>green</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

change
var firstTd = $(this).find('td:first');
to
var firstTd = $(this).find('td:first div');

Select data from text fields in table using jQuery

I have a table as below;
<table id="mytable" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td><input type="text" name="qwer"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="asddf"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="zxcv"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="poiu"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="lkjh"></td>
<td> </td>
</tr>
<tr>
<td colspan="3"> <button id="BUT">BUT</button> </td>
</tr>
</table>
The middle cells contain text fields with names. I want to get data (I think .val()) from specific input fields. How can I get them? Say I want to alert value we enter in input name="zxcv".
You can see my Fiddle here.
How can I do this?

try this
$('#mytable input[name=zxcv]').val()

If you want to iterate on input fields, and show "name" and "value" when "BUT" is clicked :
$("#BUT").click(function() {
$("#mytable input").each(function() {
alert("name : " + $(this).attr('name') + " - value : " + $(this).val());
});
});

Categories

Resources