JQuery Swap Column

I need to swap the column in a table but retain the current edit value of the column.

Here is my code:

$(this).click(function () {
var $td = $(this).closest('td.container');
var $tds = ;
$td.closest('tr').children('td').each(function () { $tds.push($(this)); });
for (var i = $td.index() + 1; i < $tds.length; i++)
$tds[i - 1].html($tds[i].html()).addClass('border');
$tds[$tds.length - 1].html('').removeClass('border');
});


However, if I have textboxes and editing the textboxes when swapping the column, the textbox values will disappear.

Here is the jsfiddle.

Step to reproduce:
1. Enter some text in textbox in column #3
2. Click on "Delete Button" in column #2
3. You will see the text entered in step #1 will disappear.


Any idea how to tackle this problem?

1 Answer
1

The issue is because you're appending the HTML of the table to the previous cell. The HTML does not contain the amended value property of the input elements the user typed in to. To fix this copy the elements from the DOM, not their HTML.

table

value

input

Also note that your logic can be simplified. Firstly, you don't need the each() loop as you can apply the click() event handler to the collection of button elements directly. You can also work with the jQuery object itself instead of looping through it to create a pointless array of jQuery objects which you need to again loop through.

each()

click()

button

$('#tblContent button').click(function() {
var $container = $(this).closest('td.container');
var $content = $container.next().children()
$container.empty().append($content);
});

.container {
width: 256px;
padding: 8px;
}

.container.border {
border: 1px solid red;
}

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
<table id="tblContent">
<tbody>
<tr>
<td class='container border'>
<table style="table-layout:fixed;width:100%'">
<tbody>
<tr>
<td>
<label class="checkbox-inline"><input type="checkbox" data-name="isactive" value="1">Column 1 OK?</label>
</td>
<tr>
<td>
<input type="text" placeholder="Put something here 1" maxlength="64" style="width:100%" />
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="Put something here 2" maxlength="64" style="width:100%" />
</td>
</tr>
<tr>
<td><button disabled>Deleteme</button></td>
</tr>
</tbody>
</table>
</td>
<td class='container border'>
<table style="table-layout:fixed;width:100%'">
<tbody>
<tr>
<td>
<label class="checkbox-inline"><input type="checkbox" data-name="isactive" value="1">Column 2 OK</label>
</td>
<tr>
<td>
<input type="text" placeholder="Put something here 3" maxlength="64" style="width:100%" />
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="Put something here 4" maxlength="64" style="width:100%" />
</td>
</tr>
<tr>
<td><button>Deleteme</button></td>
</tr>
</tbody>
</table>
</td>
<td class='container border'>
<table style="table-layout:fixed;width:100%'">
<tbody>
<tr>
<td>
<label class="checkbox-inline"><input type="checkbox" data-name="isactive" value="1">Column 3 OK</label>
</td>
<tr>
<td>
<input type="text" placeholder="Put something here 5" maxlength="64" style="width:100%" />
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="Put something here 6" maxlength="64" style="width:100%" />
</td>
</tr>
<tr>
<td><button disabled>Deleteme</button></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Finally, I'd suggest you review how you're structuring the HTML of this page. It's dangerously close to the bad practice of the late 90s of using table elements for layout. table should only be used for tabular data.

table

table

The layout you are trying to achieve can be made far more simply using div along with some CSS to style it, in a fraction of the amount of code.

div

you are amazing! Your code is simple and elegant. Thanks for sharing and thanks for helping. I know I shouldn't use table, but div caused lots of headache with me especially when I tried to "vertical center" elements within div. I don't want to use table, but really, table is the most convenience way for me right now :(
– Sam
Jun 29 at 10:26

div

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.