How to dynamically create rows and columns that are editable?

I am having an issue while dynamically creating rows and columns.
My goal is to enable the user to create rows and columns dynamically by clicking on buttons. The <td>s are supposed to be editable. This is what I kind of want:
table
The (+) button will either allow rows or columns to be edited. And the edit icon will allow editing of the ceels withink that <tr>. How can I achieve this?

My suggestion:

  1. When you are creating cell text, place them inside a span tag.
  2. Add click event listener for that span to call a change_cell function, and pass the current element using this

Now what does change_cell function do?

  1. You may simply grab the inline text using innerText property
  2. Create an input text(text field) using document.createElement("input") and set the type to text
  3. Set the new created text field value with the value you grabbed from span(cell)
  4. Add an event when editing is finished(when user keydown enter) for text field to call change_done, and pass the current element using this
  5. Now hide the span(using display:none), and add the text field as a child to parent(probably td tag)

Now what does change_done function do?

  1. Simply reverse the work, grab the new edited text from text field and use it set the hidden span data.
  2. remove the textfield, and let the span not be hidden by display:initial

More easier solution:

  1. When you are creating cell text, add them as a textfield(input), remove the border and background colour to make it just like a simple text, also set the readonly to true(not editable)
  2. Add click event listener on input(or any other editing button element) to make the text field editable, also bring border and background to make it look like a real text field.
  3. One user pressed enter, back the input textfield to 1.

keep goin on great work, happy programming.

1 Like

Is it possible to stick the new and edit buttons close to each of the <tr>s? If so, then how?

yes of course, if we assume, by default each td text is in new state, you may mark it using a small icon image as new(not edited yet), one there is an edit, you could check if the edit is not the same as initial value, then use the edited icon.
You may use a input with type hidden for each editable cell, and keep the default(initial) value on it. for each change, check if edited text is same as default, if yes, show the new, otherwise show the edited icon.

This is easy, take a paper, and write down(use shaping and painting) all possible stated of the cell, draw the flows just like child draw stuffs(I always do that). This will help alot to get an overview of case study, really easy.

I suggest you go step by step. first go for editing cell with either solutions I suggested, or anything you think could bring. Later think about edited and new icons states.

keep goin on great work, happy programming.

1 Like

Can you give a starting point?

Yes.

I would like lear you fishing, rather than give you the fish. So not so much hint my amigo, you can make it, but I’ll give omre help if you need.

let start about easier solution.

Bye default the input should look like a simple text data, and user would click on it to edit. for now let start with UI

.as_text{
border:0 solid transparent;/*no border*/
background-color: transparent;/*no background colour*/
cursor:pointer;/*cursor turn to hand when you hover on it*/
}

By default, when you place the input, add the above class to it, and make it readonly, something like this
<input type="text" class="as_text" onclick="change_cell(this)" value="Default text" readonly="yes"/>

Now the change_cell

function change_cell(input_eement){
//first make it editable
	input_eement.readOnly=false;
	//second make it look like a text field(removet he style)
input_eement.classList.remove("as_text");
	//add new listener to it, so when user enter, or leave it, make it as normal text again
}

That’s it for now, try to write down function change_done now which works reverse. it makes the input just like a simple text.

Be patient, you can do it. I don’t want to give more stuffs to make it easier.

Keep going on great work, happy programming.

1 Like

How going with the challenge? You had some progress? Got any issue?

Keep goin on great work, happy programming.

1 Like