CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Sam
Sam

Reputation: 1908

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?

Upvotes: 1

Views: 423

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

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.

$('#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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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.

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.

Upvotes: 1

Related Questions