I made a listbox by table because I needed two column to show list.
and, I am trying to edit the text in the table when I hit the listbox.
I mean the selected list is changed to something like edtitable box when I click a list, so I can edit the text directly without putting a text on the other box that comes up.
Is there a way to do this??
here is the code for the listbox:
$(document).ready(function () {
$('div#selReporterList table tr:has(td)').click(function() {
$('.selected').removeClass('selected');
$('.selected').addClass('deselected');
$(this).addClass('selected');
});
});
the table is here:
<div id="selReporterList" class="srList">
<div>
<table id="list" cellspacing="0" border="1" style="border-collapse:collapse;" ndblclick="edit()">
<tr>
<td id="a" class="1" value="apple">apple</td>
<td id="b" class="2" value="good">good</td>
</tr>
<tr>
<td id="a" class="1" value="banana">banana</td>
<td id="b"class="2" value="very good">very good</td>
</tr>
</tr>
</table>
</div>
</div>
<div id="selReporterList" class="srList">
<div>
<table id="list" cellspacing="0" border="1" onclick="changeTableModeToEdit(true)" ondblclick="changeTableModeToEdit(false)" style="border-collapse:collapse;" ndblclick="edit()">
<tr>
<td id="a" class="1" value="apple"><span>apple</span></td>
<td id="b" class="2" value="good"><span>good</span></td>
</tr>
<tr>
<td id="a" class="1" value="banana"><span>banana</span></td>
<td id="b"class="2" value="very good"><span>very good</span></td>
</tr>
</tr>
</table>
</div>
<script type="text/javascript">
function changeTableModeToEdit(toEditMode){
var value;
if(toEditMode)
{
$('#list span').each(function(){
value = $(this).text();
$(this).after('<input type="text"/>');
$(this).next().val(value).focus();
$(this).remove();
});
}
else
{
$('#list input').each(function(){
value = $(this).val();
$(this).after('<span> </span>');
$(this).next().text(value);
$(this).remove();
});
}
}
</script>
Yes, you could put the text inside of an <input type=text editable="false" /> and then when it is clicked set the editable attribute to true.
P.S. when you have multiple lines of code, right it all out, highlight it and press commend+k,
the ` is for inline code.
Related
I have the following HTML.
<td>
<table class="position">
<tbody>
<tr class="position-numbers">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<script>
let cloneTech = jquery('td').closest('select');
findNext.html(`<h1>hello</h1>`);
</script>
When I click on td I need to find very next select and append the html.
The next().html() is not working on this.
closest only works upward in the dom, if you want to find elements that are nested in an element you need to use .find('select')
This returns all elements that are inside an element, in your case you only have one select inside td so this should work for you.
you also shouldn't use .html() here because this sets the innerHTML, if you want to replace the select then use .replace(), if you want to insert it after the select, use .after()
let cloneTech = jquery('td').find('select');
findNext.after(`<h1>hello</h1>`);
if you click td and you are using jquery, you can make the next:
$(".select-technique").on("click", function(){
$(this).children("select").html(`<h1>hello</h1>`);
})
Or
$(".select-technique").on("click", function(){
$(this).find("select").html(`<h1>hello</h1>`);
})
This will put the h1 tag before the next select tag after you click a td.
<script>
$(document).ready(function () {
$('td').click(function () {
$(this).next().find('select').prepend('<h1>hello</h1>');
});
});
</script>
The html result of this <select><h1>hello</h1></select>. If you want the h1 tags outside the select do this instead
<script>
$(document).ready(function () {
$('td').click(function () {
$(this).next().find('select').before('<h1>hello</h1>');
});
});
</script>
The html result of this <h1>hello</h1><select></select>.
You can do something like this below
<table border="1" cellpadding="5">
<tr>
<td>
<table class="position" border="1" cellpadding="5">
<tbody>
<tr class="position-numbers">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
</tr>
</table>
<script>
$('td').on('click', function(){
$(this).next('td.select-technique').find('select').css('background','yellow').html('<option>Options</option>');
})
<script>
See the jsfiddle link https://jsfiddle.net/mgnwvrpj/3/
I have a table in which I have 2 tr . Inside it there are td in first td . there is services name . When I select the checkbox of one row then then I want the first td text in an input but and when I select the second checkbox I want the second tr td first value in that input , And if I want to insert both tr td first value I am inserting it , but when I untick on checked checkbox then both the td first values or removing in input, I want I f I untick one checkbox then It should remove first tr td text from Input and I when I untick second checkbox then It romoves its tr td text . here is my code , hope you understand
<!DOCTYPE html>
<html>
<head>
<title>table</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
<tr class='servicetr'>
<td class="service">
<span>Subscription Charges</span>
</td>
<td>
<span>500.00</span>
</td>
<td class="service">
<span >90.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
<tr class='servicetr'>
<td>
<span>registration fees</span>
</td>
<td>
<span>200.00</span>
</td>
<td >
<span >80.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
</tbody>
</table>
<br/>
<input type="text" name="services" id="services" style="width:100%;">
<script>
$(document).ready(function(){
$(document).on("change",".tot_amount",function(){
if (this.checked){
var servicetext = $(this).closest("tr").find('td').eq(0).find('span').text();
var totalamt = $('#services').val();
if(totalamt != ''){
$('#services').val(totalamt + ", " + servicetext);
} else {
$('#services').val(servicetext);
}
}
if(!this.checked) {
var servicetext = $(this).closest("tr").find('td').eq(0).find('span').text();
$('#services').val('');
}
});
});
</script>
</body>
</html>
$(document).on("change",".tot_amount",function(){
var servicetext = [];
$(this).closest('table').find('.servicetr').each(function(idx, elem) {
if ($(elem).find('td:last input').is(':checked')) {
servicetext.push($(elem).find('td:first span').text());
}
})
$('#services').val(servicetext.join(', '));
});
Working example: http://jsfiddle.net/2s5Lz3v6/
i am adding unlimited input field. below code is working fine only the one problem it is adding after the first <tr>. it is not adding the field it after the additional <tr>. if click on add option it is adding <before> or after first <tr>. ignoring the others <tr>.
my html
<table width="100%" cellspacing="0" id="orderchecklist_item_grid_servicecenters" class="data border">
<colgroup><col width="120">
<col>
<col width="100">
<col width="70">
</colgroup><thead>
<tr class="headings">
<th width="80%">Item</th>
<td width="10%" class="last"><button style="" onclick="addfield();" class="scalable add" type="button" title="Add Option" id="add_new_option_button"><span><span><span>Add Option</span></span></span></button></td>
</tr>
</thead>
<tbody id="orderchecklist_item_list">
<tr class="template" id="orderchecklist_item_template1">
<td><input type="text" value="" name="servicename[]" placeholder="check list item" class="input-text">
</td>
<td class="last"><button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>
</tr>
</tbody>
<tfoot id="extra_field" class="no-display template">
<tr class="template" id="orderchecklist_item_template">
<td><input type="text" name="item[]" placeholder="check list item" class="input-text"></td>
<td class="last"> <button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>
</tr>
</tfoot>
</table>
my js code for adding and removing field
<script type="text/javascript">
function addfield()
{
var htm= $('extra_field').innerHTML;
$$('#<?php echo $_block->getHtmlId() ?>_list').last('tr').insert({after:htm});
}
function removefield(ele)
{
var row = ele.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
Just insert before hidden extra field.
Code
function addfield()
{
var htm= $('extra_field').innerHTML;
$('extra_field').insert({before:htm});
}
Another Way
function addfield()
{
var htm= $('extra_field').innerHTML;
$$('#orderchecklist_item_list tr').last('tr').insert({after:htm});
}
$$('#orderchecklist_item_list').last('tr') will find tr from orderchecklist_item_list elements. So it returns '#orderchecklist_item_list' it self.
Fiddle and Fiddle 2
I have 2 values in select box and i want to get their id depending on which i select on submit button click. I am showing this select box and save button in dialog box.And when i try to select value and save i am getting [object HTMLCollection] instead of their id.So if i select Fahrzeuge i should get id 1 and if i select News i should get id 2.I am making small mistake somewhere in javascript.Here is my jsfiddle: demo.
Here is my code:
html code
<input type="button" id="butt-rahmen" value="Add Widget" />
<br /><br/>
<div id="output"></div>
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Widget</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Add Widget</b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="widgets">
<select name="widgets" id="widgets" >
<option value="1">Fahrzeuge</option>
<option value="2">News</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Save" />
</td>
</tr>
</table>
</div>
Js code:
$("#butt-rahmen").click(function (e)
{
ShowDialog(false);
e.preventDefault();
});
$("#btnSubmit").click(function (e)
{
var brand = $('#widgets select[name="widgets"]').val();
$("#output").html("<b>Widget: </b>" + widgets);
HideDialog();
e.preventDefault();
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").fadeIn(300);
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
Yes it is small mistake in JavaScript, change below line
$("#output").html("<b>Widget: </b>" + widgets);
to
$("#output").html("<b>Widget: </b>" + brand);
Try changing:
$("#output").html("<b>Widget: </b>" + widgets);
to
$("#output").html("<b>Widget: </b>" + brand);
for widgets isn't defined anywhere.
Sort of an odd question, but I'm having some trouble coming up with a good selector to do this. The jsfiddle is here: http://jsfiddle.net/NZf6r/1/
In short, I have a parent table which has a "select all" checkbox as a column in the thead. Every table row also has a checkbox. The intention is if they click the checkbox, I select (or deselect) all of the row checkboxes in the tbody. Simple, right?
However, there a rows in the table that function as child tables for each row. These child tables also have checkboxes and also have a need for the same "select all" scheme.
The tricky part is not getting the "select all" in the parent table to also select the children. My current event function looks like this (also on the jsfiddle):
$('th input').on('click', function(event) {
var isChecked = $(event.target).is(':checked');
$(event.target)
.parents('table')
.first()
.find('input[type="checkbox"]')
.each(function(i, checkbox) {
$(checkbox).prop('checked', isChecked);
});
});
I know I can use direct child selectors (>), but I'm not quite sure of the best way to incorporate that.
I also know I could add a class to the checkboxes for each table type (parent vs. child) and add that to the input selector, but I'm curious if there's a way I can avoid doing that. Some jQuery magic, if you will.
Here is the rough HTML of things (not the full table, obviously) in case you can't access the jsfiddle:
<table>
<thead>
<tr>
<th style="width:20px">
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Aaaaa</td>
</tr>
<tr>
<td colspan="2">
<div style="padding-left: 20px">
<table>
<thead>
<tr>
<th>
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Aaaaa</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Bbbbb</td>
</tr>
<tr>
<td colspan="2">
<div style="padding-left: 20px">
<table>
<thead>
<tr>
<th>
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Bbbbb</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Use this script instead:
$('th input').on('click', function(event){
var parenttable = $(this).parents('table:first');
var isChecked = $(event.target).is(':checked');
parenttable.find(">tbody>tr>td>div>input").prop('checked', isChecked);
});
try this demo
$('th input').on('click', function (event) {
var isChecked = $(event.target).is(':checked');
$(event.target)
.closest("table")
.find('> tbody > tr:not(:has(table)) > td input[type="checkbox"]')
.each(function () {
$(this).prop('checked', isChecked);
});
});