Click here to Skip to main content
15,886,873 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
i need a small correction in this code ie in this code when a user enter 2 in the textbox and enter the details in the row and if the user want one more row then the user will enter 3 in the textbox then all the previously entered values will disappear and three new rows will appear,but what i need is when user enter 2 in the textbox then 2 rows will generate after entering values in that rows, if the user need again 1 or 2 more rows then he will enter 3 or 4 in the textbox then new rows want to generate without disappearing the values entered in the above rows.
here default value of the textbox is one so when we load the page there will be table with heading and one row and after entering values in the 1st row if user need one more row then user will enter 2 in the textbox and 2 rows will appear but what i need is when user enter new value in the textbox then row want to appear without disappearing the values entered in the above row.

What I have tried:



Enter the no of rows required :









SNo. Name Age Price



function generate() {
var value = document.getElementById('txtCount').value;
if (!isNaN(value)) {
var rows = parseInt(value);
var trs = [];
for (var i = 0; i < rows; i++) {
trs.push('<tr> <td><input type="text" class="form-control"></td><td> <input type="text" class="form-control"> </td><td> <select class="form-control" id="sel1"><option>select</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option> <option>29</option><option>30</option><option>31</option><option>32</option><option>33</option><option>34</option><option>35</option><option>36</option><option>37</option><option>38</option><option>39</option><option>40</option><option>41</option><option>42</option><option>43</option><option>44</option><option>45</option><option>46</option><option>47</option><option>48</option><option>49</option><option>50</option><option>51</option><option>52</option><option>53</option><option>54</option><option>55</option><option>56</option><option>57</option><option>58</option><option>59</option><option>60</option></select> </td>\n\
<td> <input type="text" class="form-control"> </td> </tr> ')
}
var tbodyHtml = trs.join('');
var tbody = document.querySelector('#tbl tbody');

tbody.innerHTML = tbodyHtml;

}
}
generate();






Posted
Updated 9-Dec-17 1:27am

1 solution

Check this out: Add Table Rows using JS[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900