主页 / 问题 / 665052
Accepted
Fox
Asked:2020-05-12 20:17:41 +0000 UTC2020-05-12 20:17:41 +0000 UTC

jquery 和/或 javascript 如何自动创建表 JSON 数组？

  • 772

你能告诉我如何使用 JQuery 和（或）JavaScript 使用我的表中的代码创建一个 JSON 数组，并在删除表中的一行时删除数组中的一行吗？那些。将表中的所有信息写入一个数组，使其看起来像这样：

[
    {
        "id": "1", 
        "country": "India", 
        "date": "", 
        "comment": "Hello world1"
    },
    {
        "id": "2", 
        "country": "Germany", 
        "date": "", 
        "comment": "Hello world2"
    }
]

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;

    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
            case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
        }
    }
}

function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
    }catch(e) {
        alert(e);
    }
}
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD><INPUT type="text" name="txt"/></TD>
        <TD>
            <SELECT name="country">
                <OPTION value="in">India</OPTION>
                <OPTION value="de">Germany</OPTION>
                <OPTION value="fr">France</OPTION>
                <OPTION value="us">United States</OPTION>
                <OPTION value="ch">Switzerland</OPTION>
            </SELECT>
        </TD>
    </TR>
</TABLE>

javascript

1 个回答

  1. Best Answer

    //функция вернет JSON таблицы
function tableToJson() {
  var json = []
  $('#dataTable tr').each(function(key,elem){
    json.push({
      id: key + 1,
      country: $(elem).find('select[name="country"] option:selected').text(),
      date: '',
      comment: $(elem).find('input[name="txt"]').val()
    })
  });

  return json
}

$(function(){
  console.log(tableToJson());
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TABLE id="dataTable" width="350px" border="1">
  <TR>
    <TD><INPUT type="checkbox" name="chk"/></TD>
    <TD><INPUT type="text" name="txt" value='text1'/></TD>
    <TD>
      <SELECT name="country">
        <OPTION value="in" selected="selected">India</OPTION>
        <OPTION value="de">Germany</OPTION>
        <OPTION value="fr">France</OPTION>
        <OPTION value="us">United States</OPTION>
        <OPTION value="ch">Switzerland</OPTION>
      </SELECT>
    </TD>
  </TR>
  <TR>
    <TD><INPUT type="checkbox" name="chk"/></TD>
    <TD><INPUT type="text" name="txt" value='text2'/></TD>
    <TD>
      <SELECT name="country">
        <OPTION value="in">India</OPTION>
        <OPTION value="de">Germany</OPTION>
        <OPTION value="fr" selected="selected">France</OPTION>
        <OPTION value="us">United States</OPTION>
        <OPTION value="ch">Switzerland</OPTION>
      </SELECT>
    </TD>
  </TR>
</TABLE>

    • 3

相关问题