We Keep Coding

How can I edit table row using JavaScript querySelector()?

I am trying to edit data from a table. When the edit button is pressed it will bring up an input field to edit the new value in the selected row, I tried using the code below, but nothing changes when I press the edit button.
Here is my code:
const editRow = (index = "x") => {
const tdTable = document.querySelectorAll("table > tbody > tr");
const newRow = `
<tr>
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="umur" />
</td>
<td>
<input type="text" name="address" />
</td>
<td colspan = 2>
<span class="btn btn-info" onClick="saveData()">Save</span>
</td>
</tr>`;
tdTable.innerHTML = newRow;
};
Here is what the table looks like in the browser when I press the edit button.

You need to do something to actually put the input values back into the original <td>s. Below I prepared an MCVE (minimal complete and viable example), showing how it can be done:
const tb=document.querySelector("tbody"), edidel="<button>Edit</button> <button>Delete</button>";
// prepare the page first (fill in some sample data):
tb.innerHTML= [[1,"jansen",35,"medan"],
[2,"Alfa",31,"jakarta"],
[3,"joko",10,"solo"],
[4,"eko cahyonto",20,"NTB"]].map(r=>
"<tr><td>"+r.join("</td><td>")+"</td><td>"+edidel+"</td></tr>" ).join("\n");
tb.onclick=ev=>{
[...ev.target.closest("tr").children].forEach((td,i)=>{ const btn=ev.target.textContent;
if (btn==="Edit")
td.innerHTML=i<4?'<input type="text" value="'+td.textContent+'" data-orig="'+td.textContent+'">'
:'<button>Save</button> <button>Cancel</button>';
else if (["Save","Cancel"].includes(btn))
td.innerHTML=i<4?(btn==="Save"?td.children[0].value:td.children[0].dataset.orig)
:edidel;
})
}
input {width:50px}
<table>
<thead><tr><th>No</th><th>Nama</th><th>Umur</th><th>Alamat</th><th>CRUD</th></thead>
<tbody></tbody>
</table>
The first 7 lines of code simply prepare a small table on which we can work. The actual script then starts with a "delegated click event attachment" on the first <tbody> element of the page (which happens to be our test table). This means, we can add or remove table records and don't have to worry about attaching events to the newly created buton elements any more.
An action will only happen, if the clicked element has an ´.textContent` of either "Edit", "Save" or "Cancel" (an action for the "Delete" button has not yet been defined but can easily be added).
Depending on the actual clicked button some action on the <TD> elements directly before the button will be performed:
when going into "Edit"-mode the td.textContent of each <td> is copied into a newly created <input type="text"> element and is also save in its data-orig attribute, in case we want to click on "Cancel" later on.
"Save" will copy the .value of each <td>s first child (the <input> element) back to its parent td.innerHTML attribute.
in case "Cancel" was clicked, the <input>'s .dataset.orig value is put back into the td.innerHTML attribute.

JavaScript is a case-sensitive language.
try fixing the uppercase onClick to onclick, as the example: <button onclick="myFunction()">Click me</button>

Toggle checkbox in Angular JS repeater table by clicking enclosing row

I have a table constructed with ng-repeat, where each row has a checkbox set by a value in the JSON data that's being repeated:
<tr ng-repeat="t in tabledata" ng-click="t.isChecked=t.!isChecked">
<td><input type="checkbox" ng-model="t.isChecked"></td>
<td>{{t.firstName}} {{t.lastName}}</td>
</tr>
I would like a click on the row to toggle the checkbox value in that row. I tried the above, but it does not work. Thoughts?

Try this:
ng-click="t.isChecked = !t.isChecked"
Exclamation sign should go in front of t.isChecked.
Also make sure you stop propagation of the click event on the checkbox itself, otherwise clicking on the checkbox will not allow you to check/uncheck anything.
<input type="checkbox" ng-model="t.isChecked" ng-click="$event.stopPropagation()">
Demo: http://plnkr.co/edit/KJziWDmlN2gTbthOF4yJ?p=preview

Jquery Datatable Sort Click Event in Table Header Not in Column Title Text

I have this table which I implement the Jquery-DataTables
and in that I have a Select All function that works well;
<thead>
<tr>
<th>
<label>
<input type="checkbox" > All
</label>
</th>
</tr>
</thead>
the problem is when I clicked the checkbox the sort event of table is also being performed. what I want is, when I click on the Text "All" or the Checkbox the sort event will not perform, instead, it will only perform as usual if the table header(outside the Text or Checkbox) and the Sort-Icon is clicked.
any idea how to do it?

I have solved this issue by running this script (from this) after initialization of Jquery-Datable to my table;
$('input').click(function (event) {
event.stopPropagation();
});
hope it will help someone someday.

Enable and disable form fields in Safari

I am trying to enable and disable a field using Javascript, works fine on IE but does not work on Safari.
FIELDS
If yes is clicked, should enable free text below, else disabled.
<tr id="ContainerQ1266I1396">
<td>Ultrasound Used</td>
<td>
<input type="radio" name="Q1266I1396" id="Q1266I13960" onclick="">No</input>
<input type="radio" name="Q1266I1396" id="Q1266I13961" onclick="regft();">Yes</input>
</td>
</tr>
<tr id="ContainerQ1267I1276">
<td>fretext</td>
<td>
<input id="Q1267I1276" type="text"size="80" />
</td>
</tr>
JAVASCRIPT
function regft(){
var regf=document.getElementById("Q1266I13961");
document.getElementById("ContainerQ1267I1276").disabled=true;
if (regf.checked==true){
document.getElementById("ContainerQ1267I1276").disabled=false;
}
}

First off the radio buttons don't seem to be in the same group - if you want them to be mutually exclusive options (which is what radio buttons mostly get used for) you could give them the same "name" attribute. See this tutorial for example: http://www.w3schools.com/jsref/dom_obj_radio.asp
Second, I think you are setting the disabled property on the tr element instead of the input element. Try:
document.getElementById("Q1267I1276").disabled=false;

hide divs when selecting new rado button using toggle

When I click on a radio button, if it's the last one in the list, it shows all of the hidden divs and doesn't close all open divs when I select another radio button. I know I'm close...but missing something.
$(document).ready(function() {
$('input').on('change',function(){
$(".groupNumber").hide().filter(":lt(" + this.value + ")").slideToggle("slow");
});
});
I thought I was taking care of it by having the "hide" at the beginning of the chain.
Html
<table cellpadding="0" cellspacing="0">
<tr>
<td width="25"><input type="radio" name="rNumber" value="1"></td>
<td width="25"><input type="radio" name="rNumber" value="2"></td>
<td width="25"><input type="radio" name="rNumber" value="3"></td>
</tr>
</table>
The divs are as follows:
<div id="grp1" class="groupNumber">Content Here</div>
<div id="grp2" class="groupNumber">Content Here</div>
<div id="grp3" class="groupNumber">Content Here</div>
What I want is the div for the corresponding radiobutton to be visible and to close any others that may be open.

That is because yo are using lt, you should use eq instead. try this.
using lt you are getting all the divs less that the index value to be shown so it is displaying that one and all previous ones. instead just use eq to get the div to be shown from the collection.
$(document).ready(function() {
$('input').on('change',function(){
$(".groupNumber").hide().eq((+this.value -1)).slideToggle("slow");//Probably Slide toggle probably doesn't make sense here as change event won't be triggered if you select the same option again.
});
});
Fiddle