Jangrina Posted July 14, 2013 Share Posted July 14, 2013 (edited) Hi all, I have two problems. My first problem is I want some symbols to act like a button. But it doesn't act one. E.g. When user click "[+]", it would trigger a java script function to add a row. I use span tag with mouse event onclick. I suppose the symbols "[+]" would be underlined but it doesn't. My code is as below: <html><head><title>ISI-Tac</title><script type="text/javascript" src="funIndex.js"></script><body><table id="DETAILS" border="1"><tr> <td>NAME 1</td> <td><input type="TEXT" name="name1" size="50"></td> <td></td><tr><tr> <td>NAME 2</td> <td><input type="TEXT" name="name2" size="50"></td> <td><span onclick="addRow('SHOW');">[+]</span></td><tbody id="ROW"><div id="SHOW"></div></tbody></tr></table></body></head></html> My second problem is my JavaScript function addRow is not functioning. Function addRow()is as below: function addRow(){ var tbody = document.getElementById("ROW"); //tbody = your table body tbody.innerHTML = ""; //empty table body tr = tbody.insertRow(-1); //append a row in table body td = tr.insertCell(-1); td.innerHTML = "NAME "; td = tr.insertCell(-1); td.innerHTML = "<input type="TEXT" name="name1" size="50">"; td = tr.insertCell(-1); td.innerHTML = "<span onclick="addRow()">[+]</span>";} Pls help me. Edited July 16, 2013 by Jangrina Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2013 Share Posted July 14, 2013 Your HTML is invalid. When the parser finds a <tr> element it creates its own <tbody> element to contain it. After that, you're adding another <tbody> inside that. So to start off, your <tbody> element should appear right after the <table> tag: <table> <tbody> <tr><td></td></tr> </tbody></table> Or another option: <table> <thead> <tr><td></td></tr> </thead> <tbody id="ROW"></tbody></table> Secondly, you can't have a <div> element inside a table at all, except if it's wrapped with a <td> or <th> element. The last problem if that you have mismatched quotes here: td = tr.insertCell(-1); td.innerHTML = "<input type="TEXT" name="name1" size="50">"; td = tr.insertCell(-1); td.innerHTML = "<span onclick="addRow()">[+]</span>"; Link to comment Share on other sites More sharing options...
justsomeguy Posted July 15, 2013 Share Posted July 15, 2013 You also have the entire body inside the head, and you aren't using </tr> to close any rows. I suppose the symbols "[+]" would be underlined but it doesn't. Why would it automatically underline a span tag? Use CSS to set the style however you want it, you can also change the mouse cursor when you point at it. Link to comment Share on other sites More sharing options...
Jangrina Posted July 16, 2013 Author Share Posted July 16, 2013 Hi All, Thank you for the feedback. With assistance, I have improved the code. But still the code have some glitch. Can you please look into this code. I have two files : 1. HTML In this file, call function addRow to add a row. <table id="tblDetails" border="1"><tr> <td>YEAR</td> <td><input class="txtName" type="TEXT" name="year" id="year"></td> <td></td></tr><tr> <td>NAME 1</td> <td><input class="txtName" type="TEXT" name="name1" id="name1"></td> <td></td><tr><tr> <td>NAME 2</td> <td><input class="txtName" type="TEXT" name="name2" id="name2"></td> <td id="adder" onclick="addRow()">[+]</td></tr></table> 2. JavaScript var numOfName = 2;function addRow( ){ ++numOfName; // change the current <td> back into an ordinary one with no content and no onclick hooked up this.id = null; this.innerHTML = ""; this.onclick = function() { /* do nothing */ }; // then add row to the entire table: var row = document.getElementById("tblDetails").insertRow(-1); // create col 1 var td1 = row.insertCell(-1); td1.innerHTML = "NAME " + numOfName; // create col 2 var td2 = row.insertCell(-1); var inp = document.createElement("input"); inp.name = "name" + numOfName; inp.id = "name" + numOfName; inp.className = "txtName"; td2.appendChild(inp); // create col 3 var td3 = row.insertCell(-1); td3.innerHTML = "[+]"; td3.id = "adder"; // this becomes the new adder td3.onclick = addRow;} The problem is when I first click "[+]", it adds a row, but it produces two "[+]". Pls refer attachment. How could this happen? What needs to be done in order to solve this? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 16, 2013 Share Posted July 16, 2013 this inside the function is not set to the td that was clicked on, it's set to the window. You can change that using Function.call: <td id="adder" onclick="addRow.call(this)"> Inside that onclick handler, this is set to the td. Using Function.call, you can pass the object that you want this to be set to inside the function. Doing it like that will cause the function to run on the context of the td element, so this will be set to the td inside the function. You can also pass this as a parameter to the function instead of changing the scope. That doesn't solve assigning the handler to the new element though, it's going to have the same problem. To fix that, add this code somewhere in your Javascript (not inside the function), so that it adds a new method called Function.createDelegate: if ((typeof Function.prototype.createDelegate) == 'undefined') {Function.prototype.createDelegate = function(obj, args){ var method = this; return function() { var callArgs = args || arguments; return method.apply(obj || window, callArgs); };}} createDelegate will return a copy of the function that will run in a certain scope. So then you can do this: td3.onclick = addRow.createDelegate(td3); That means that when you click on td3, it will execute addRow and this will be set to td3 (or whatever you pass to createDelegate). 1 Link to comment Share on other sites More sharing options...
Jangrina Posted July 16, 2013 Author Share Posted July 16, 2013 I don't understand your code. Its too difficult for me. But it works like a charm. Many thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now